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"><
  1. 页面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. matlab中文论坛视频谷普教程MATLAB压缩包介绍

    matlab中文论坛视频谷普教程MATLAB压缩包介绍 我也正在学习这个软件 ,看到这个教程就在这里分享了,希望大家喜欢!Matlab 初学者视频教学1. Matlab视频:Matlab中文论坛为新手 ...

  2. （译）iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0)

    (译)iPhone: 用公开API创建带小数点的数字键盘 (OS 3.0, OS 4.0) 更新:ios4.1现在已经将这个做到SDK了.你可以设置键盘类型为UIKeyboardTypeDecimal ...

  3. 在magento中定义static block

    在magento中如何调用static block?(系统面板内CMS---->static block) 解答:若想在站点页面的某个地方放点静态的内容,比如广告,或者是促销信息之类的,这样的东 ...

  4. iOS多线程GCD(转)

    原文:http://www.cnblogs.com/pure/archive/2013/03/31/2977420.html Grand Central Dispatch (GCD)是Apple开发的 ...

  5. 依据Path取Json指定节点的值

    下面方法为依据Path取json节点值得方法.废话不多说,先上代码: 測试方法例如以下:

  6. 【Problem】Count and Say

    问题分析 题目理解:给定一个整数,如果相邻的几个数位数字是相同的,则输出重复出现的次数加上该数字本身:继续向后查找直到所有的数位处理完. 按照上述思路,则: input output 1 11 11 ...

  7. CentOS 6使用VNC配置远程桌面

    首先,配置vncservers(注意,rootW为1,普通用户按2,3以此类推) [root@hadoop1001 hadoop]# vi /etc/sysconfig/vncservers # VN ...

  8. nginx 几个参数

    worker_processes : When set to 'auto', which is also the default behavior, Tengine will create the s ...

  9. leetcode Linked List Cycle II python

    # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val = ...

  10. ecshop开发日志之支付插件开发

    ecshop开发一个支付插件的方法(例如要新建一个为paytest-----支付测试)1.languages/zh_cn/payment/目录下新建一个paytest.php文件  内容如下: < ...