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


Posted in Javascript onMay 07, 2013
    <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>
Javascript 相关文章推荐
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
Jqprint实现页面打印
Jan 06 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 Javascript
nullJavascript中创建对象的五种方法实例
May 07 #Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 #Javascript
javascript中的startWith和endWith的几种实现方法
May 07 #Javascript
js 获取和设置css3 属性值的实现方法
May 06 #Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 #Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 #Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 #Javascript
You might like
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHPEXCEL 使用小记
2013/01/06 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
限制文本字节数js代码
2007/03/06 Javascript
jQuery live
2009/05/15 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
JS基于面向对象实现的拖拽功能示例
2016/12/20 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
详解python之协程gevent模块
2018/06/14 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
小学三八妇女节活动方案
2014/03/16 职场文书
批评与自我批评总结
2014/10/17 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
天下第一关导游词
2015/02/06 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript