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 相关文章推荐
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 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创建多级目录的方法
2015/03/24 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
py中的目录与文件判别代码
2008/07/16 Python
Python的动态重新封装的教程
2015/04/11 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
django的csrf实现过程详解
2019/07/26 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
经典婚礼主持词
2014/03/13 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
管理人员岗位职责
2015/02/14 职场文书
父亲节寄语大全
2015/02/27 职场文书