jQuery实现动画效果的实例代码

代码如下:

<style type="text/css">
       table{border:1px solid #666;}
       table td{border:1px solid #eee;width:200px;height:200px;}
       img{width:200px;height:200px;border:none;position:relative;}
    </style>

<script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $('img').click(function () {
            //                $('img').animate({ left: '-=200px' }, 2000).animate({ left: '-=200px' }, 2000)
            //                .animate({ left: '+=400px', top: '-=200px' }, 1).animate({ left: '-=200px' }, 2000).animate({ left: '-=200px' }, 2000)
            //                .animate({ left: '+=400px', top: '-=200px' }, 1).animate({ left: '-=200x' }, 2000).animate({ left: '-=200px' }, 2000)
            //            })
            var i = 0; var c = 0;
            $('img').click(function () {
                if (c < 3) {
                    if (i == 2 & c == 0) { $('img').animate({ left: '+=400px', top: '-=200px' }, 1); c++ }
                    else if (i == 2 & c == 1) { $('img').animate({ left: '-=200px' }, 2000); c++ }
                    else if (i == 2 & c == 2) { $('img').animate({ left: '-=200px' }, 2000); c = 0; i++; }

else if (i == 3 & c == 0) { $('img').animate({ left: '+=400px', top: '-=200px' }, 1); c++ }
                    else if (i == 3 & c == 1) { $('img').animate({ left: '-=200px' }, 2000); c++ }
                    else if (i == 3 & c == 2) { $('img').animate({ left: '-=200px' }, 2000); c++; }
                    else { $('img').animate({ left: '-=200px' }, 2000); i++; }
                }
            })
        })
    </script>

</head>
<body>
   <table cellpadding="0" cellspacing="0">
      <tr>
        <td> </td> <td></td> <td></td>
      </tr>

<tr>
        <td></td> <td></td> <td></td>
      </tr>

<tr>
        <td></td> <td></td> <td><img src="images/2.gif" alt="奔跑的小人" /></td>
      </tr>
   </table>
</body>
</html>

赞 (0)

相关推荐

  • jQuery中实现动画效果的基本操作介绍

    动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数,speed. fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度 滑动显示 slideDown(): slideUp(): slideToggle(): 都可以传入一个speed参数. $(':animated');获取正在执行动画的元素. 将正在执行动画的元素停止: $(':animat

  • Jquery实现简单的动画效果代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • 基于Jquery的温度计动画效果

    基于Jquery的温度计动画效果

    设计图如下:1.xhml 复制代码 代码如下: <div id="mometer"> <div id="hot"></div> <span> <div id="Hgheader">0℃</div> <div id="Hg"></div> </span> </div> <input name="

  • 基于jquery的动画效果代码

    基于jquery的动画效果代码

    jquery动画 有意思的地方见效果图: 思想: 将图片设置分割div的背景图片,控制div的属性,可以现实有趣的滤镜效果,本例中展示了一种,感兴趣的朋友可以尝试其他滤镜的实现. 本例其余动画部分,主要是利用jquery中提供animate和delay实现. animate:这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性. delay:设置一个延时来推迟执行队列中之后的项目. 实例效果: jquery 动画 *{margin: 0px;paddi

  • 不用jQuery实现的动画效果代码

    不用jQuery实现的动画效果代码

    不过随着新版本的升级, 体积也慢慢变大了.24KB, Minified and Gzipped 155KB, Uncompressed Code压缩并gzip输出24K, 也不小了.如果页面上一个简单的效果,一个简单的动画就没必要载入这么大的库.看下面这个图片渐变效果, 其实纯js不到20行就可以搞定了. body {padding:0; margin:0;} #main {margin: 50px auto;border: 1px solid #ccc;width:700px} #main i

  • jQuery学习笔记之jQuery动画效果

    基本动画代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>Hello World jQuery!</title><script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type=&quo

  • jQuery实现动画效果的实例代码

    复制代码 代码如下: <style type="text/css">       table{border:1px solid #666;}       table td{border:1px solid #eee;width:200px;height:200px;}       img{width:200px;height:200px;border:none;position:relative;}    </style> <script src=&quo

  • jquery带动画效果幻灯片特效代码

    jquery带动画效果幻灯片特效代码

    本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图:                                 -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • vue使用transition组件动画效果的实例代码

    transition文档地址 定义一个背景弹出层实现淡入淡出效果 <template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" v-if="show">hello</div> </tra

  • jQuery实现动画效果circle实例

    jQuery实现动画效果circle实例

    本文实例讲述了jQuery实现动画效果circle的方法.分享给大家供大家参考.具体如下: 这款jQuery实现动画效果circle,Google+的圈子特效做的很不错,这里模仿下,时间有限,还有一个动画累积的问题没有解决.当然,是基于 jQuery的,纯JS 还没有这个能力呢.感兴趣的朋友可以加以完善试试. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

  • Android仿视频加载旋转小球动画效果的实例代码

    Android仿视频加载旋转小球动画效果的实例代码

    先上个效果图,以免大家跑错地了. 嗯,除了只能录三秒,其他没啥问题. 下面分析一下怎么实现上面这个效果. 理性分析后我们可以看到是几个小球绕着一个圆进行运动,那这里面的重点我们看看什么. 绘制五个球,没什么难度,让球绕圆进行运动,这个好像我们没有见到是怎么去实现了,那下就说这个. 从本质上看,球绕圆运动,其实我们可以看作是一个物体绕指定的路劲运动,那我们就有下面几个东西需要说一下: 1:Path 2:ValueAnimator 3:PathMeasure 前两个大家应该都见过,一个是路径,就是可

  • Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码

    Android使用Rotate3dAnimation实现3D旋转动画效果的实例代码

    利用Android的ApiDemos的Rotate3dAnimation实现了个图片3D旋转的动画,围绕Y轴进行旋转,还可以实现Z轴的缩放.点击开始按钮开始旋转,点击结束按钮停止旋转. 代码如下:: Rotate3dAnimation.java public class Rotate3dAnimation extends Animation { private final float mFromDegrees; private final float mToDegrees; private fi

  • JS打开层/关闭层/移动层动画效果的实例代码

    css 复制代码 代码如下: body, span, div, td { font-size:12px; line-height:1.5em; color:#849BCA; }#bodyL { float:left; width:84px; margin-right:2px; }a.od { width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849B

  • CSS3结合jQuery实现动画效果及回调函数的实例

    写期末项目中,朋友提出的 idea ,当用户登录成功时欢迎用户的特效,即欢迎用户信息从底部上升到页面中,之后再退回底部. 他遇到的问题是:从底部能出来提示信息,但是出来之后就下不去了. 听过后,考虑之,想到用回调函数来解决这个Bug,然后模拟登录成功时进入主页(即刷新页面),弹出欢迎信息并消失,写了一个类似这样的动画效果.仅供参考: 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8

随机推荐