注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

IOS & JAVA KEY

(iMilo)

 
 
 

日志

 
 
关于我

All the splendor in the world is not worth a good friend!! Hello my friend!!

网易考拉推荐

使图像滚动--jQuery事件处理  

2011-02-13 14:04:57|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2011-02-09

l  使图像滚动

知识点:

点击图像之后,使图像从左到右滚动。

说明:

animate(params,[duration],[easing],[callback]):用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

params (必选)Options一组包含作为动画属性和终值的样式属性和及其值的集合

duration (可选)String,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

easing (可选)String要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" "swing".

callback (可选)Function在动画完成时执行的函数

fadeTo():此方法调整指定元素的不透明度。

.fadeTo(speed,opacity,[callback])

speed(必选)String,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

opacity(必选)Number要调整到的不透明度值(01之间的数字).

callback (可选)Function在动画完成时执行的函数

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>jQuery事件处理--使图像滚动</title>

    <script type="text/javascript" src="rs/js/jquery.js"></script>

    <script type="text/javascript">

    <!--

    $(

        function()

        {

            $('img').click(

                function()

                {

                    $(this).animate({left:600}, 'slow',

                        function()

                        {

                            $('img').fadeTo('slow', 0)

                                .fadeTo('slow', 1)

                                .animate({left:0}, 'slow');

                        }

                    );

                }

            );

        }

    );

    //-->

    </script>

    <style type="text/css">

        img{

            position: relative;

        }

    </style>

  </head>

  <body>

    <img alt="佑国寺" src="rs/images/cell.jpg">

  </body>

</html>

  评论这张
 
阅读(523)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017