HTML页面:

  • <!-- HTML代码片段中请勿添加<body>标签 //-->
  • <div id="container">
  • <div id="first"></div>
  • <div id="second"></div>
  • </div>
  • <!-- 推荐开源CDN来选取需引用的外部JS //-->
  • <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"><
页面CSS：
  1. /*CSS源代码*/
  2. #container{
  3. position: absolute;
  4. width: 320px;
  5. height: 320px;
  6. border:1px solid #ccc;
  7. }
  8. #first{
  9. width: 100px;
  10. height: 100px;
  11. background: orange;
  12. }
  13. #second{
  14. width: 100px;
  15. height: 100px;
  16. background: red;
  17. position: absolute;
  18. right:0;
  19. bottom:0;
  20. }

JS:

var $first=$('#first');
    var $second=$('#second');

(function firstMove(){
        $first.animate({
            "left":220,
            "top": 0,
        },400,"linear",function(){
            $first.animate({
                "left":220,
                "top":220
            },400,"linear",function(){
                $first.animate({
                    "left":0,
                    "top":220
                },400,"linear",function(){
                    $first.animate({
                        "left":0,
                        "top":0
                    },400,"linear",function(){
                        firstMove();
                    });
                });
            });
        });
    })();

(function secondMove(){
        $second.animate({
            "right":220,
            "bottom":0
        },400,"linear",function(){
            $second.animate({
                "right":220,
                "bottom":220
            },400,"linear",function(){
                $second.animate({
                    "right":0,
                    "bottom":220
                },400,"linear",function(){
                    $second.animate({
                        "right":0,
                        "bottom":0
                    },400,"linear",function(){
                        secondMove();
                    });
                });
            });
        });
    })();

/*Javascript代码片段*/

var $first=$('#first');
var $second=$('#second');

function h(x, currentTime, beginningValue, changeValue, duration){
    if(beginningValue){
        if(x<0.25){
            return (0.25-x)*4;
        }else if(x<0.5){
            return 0;
        }else if(x<0.75){
            return (x-0.5)*4;
        }
        return 1;
    }else{
        if(x<0.25){
            return x*4;
        }else if(x<0.5){
            return 1;
        }else if(x<0.75){
            return (0.75-x)*4;
        }
        return 0;
    }
}

function v(x, currentTime, beginningValue, changeValue, duration){
    if(beginningValue){
        if(x<0.25){
            return 1;
        }else if(x<0.5){
            return (0.5-x)*4;
        }else if(x<0.75){
            return 0;
        }
        return (x-0.75)*4;
    }else{
        if(x<0.25){
            return 0;
        }else if(x<0.5){
            return (x-0.25)*4;
        }else if(x<0.75){
            return 1;
        }
        return (1-x)*4;
    }
}

$.extend( $.easing,
        {
            "v":v,
            "h":h
        });
        
(function firstMove(){
    $first.animate({
        "left":220,
        "top":220
    },{
        duration: 1600,
        specialEasing: {
            left: 'h',
            top: 'v'
        },
        complete: function() {
            firstMove();
        }
    });
})();

(function secondMove(){
    $second.animate({
        "left":0,
        "top":0
    },{
        duration: 1600,
        specialEasing: {
            left: 'h',
            top: 'v'
        },
        complete: function() {
            secondMove();
        }
    });
})();

【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画的更多相关文章

  1. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  2. [jQuery编程挑战]008 生成逗号分隔数字

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  3. [jQuery编程挑战]005 使用最短的代码生成元素的闪烁效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  4. Jquery 动态交换两个div位置并添加Css动画效果

    前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子 ...

  5. [jQuery编程挑战]001：实现页面元素加速动画效果

    要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...

  6. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  7. [jQuery编程挑战]007 切换数据表格的行列

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  8. [jQuery编程挑战]004 针对选择框词典式排序

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  9. [jQuery编程挑战]002：实现一个转盘大抽奖

    body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500p ...

随机推荐

  1. Git与SVN的比较及优点

    前天处女面被问到了你为什么要用Git而不用SVN,答的不是很理想,正好今天晚上小组内部进行了Git使用的培训,便想着总结一下Git与SVN的差异以及Git的优点. 一.Git与SVN的比较 1.git ...

  2. Unity 绘制多边形

    最近工程需要用到一个多边形用来查看角色属性,于是就研究了下Mesh用网格做了一个.遗憾的的 UGUI 渲染不了 3D 物体,然后又用了一段时间研究了下UGUI的网格绘制. 不过终于还是完成了,虽然有些 ...

  3. Neutron数据库同步错误 NotImplementedError: No support for ALTER of constraints in SQLite dialect

    错误信息 root@controller:~# su -s /bin/sh -c "neutron-db-manage --config-file /etc/neutron/neutron. ...

  4. AlertDialog.Builder中的setMultiChoiceItems中的事件处理

    因为实习项目中涉及到类似于时钟设置闹钟反复时间的原因须要使用对话框的方式呈现.因为DialogFragment眼下还没实验出嵌套Fragment的方法.所以临时先用AlertDialog.Builde ...

  5. 《think in python》学习-4

    think in python -4 接口设计: 本章引入了一个实例 来讲解接口方面的知识. 准备工作: 下载swampy模块,从地址下载,并安装,安装信息可以从网页上查看. swampy模块 提供各 ...

  6. SQL SERVER2012 无法连接远程服务器

    SQL SERVER2012 无法连接远程服务器,报"尝试读取受保护的内存"错误. 解决方法: 运行CMD,输入 netsh winsock reset,回车.重启SSMS,搞定.

  7. Neo4j简介

    Neo4j简介 发表于2013年3月16日 11:52 p.m.    位于分类图数据库与图并行计算 现实中很多数据都是用图来表达的,比如社交网络中人与人的关系.地图数据.或是基因信息等等.RDBMS ...

  8. json（转）

    转自:http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如何使用J ...

  9. 安装jdk和tomcat

    安装jdk和tomcat 1,准备工作 虚拟机 VMware :liunx系统镜像 bebian :连接操作软件 putty: 开源图像FTP客户端winspc: Java 语言的软件开发工具包 JD ...

  10. Linux学习之域名解析命令

    (1) /etc/hosts :记录hostname对应的ip地址 /etc/resolv.conf :设置DNS服务器的ip地址 /etc/host.conf :指定域名解析的顺序(是从本地的hos ...