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. 2014第11周一word样式

    今天摸索使用了word的样式替换功能感觉不错,简单记录下: 1.将某一个样式的标题统一替换为另一样式,之前一般是格式化一个个找到标题设置格式, 今天才发现可以选中标题->在浮动框上单击样式或开始 ...

  2. Android UI ActionBar功能-自定义 Action Bar 样式

    ActionBar的样式官方提供了三种: Theme.Holo Theme.Holo.Light Theme.Holo.Light.DarkActionBar 但不仅仅是这三种,我们还可以自己定义Ac ...

  3. [转]Asp.Net MVC使用HtmlHelper渲染,并传递FormCollection参数的陷阱 【转】

    在Asp.Net MVC 1.0编程中,我们经常遇见这样的场景,在新建一个对象时候,通过HtmlHelper的方式在View模型中渲染Html控件,当填写完相关内容后,通过Form把需要新建的内容Po ...

  4. 【Android Tricks 6】ViewPager首页与尾页的滑动动作响应

    ViewPager能够说是Android应用中使用比較广发的一个组件了.它能够帮助我们非常 方便地实现滑动更换View的效果.刚好近期搞的一个项目有一个需求用到了这个,同 时是要能在首页和尾页滑动时可 ...

  5. C-Free 您不能使用调试解决方案

    什么时候C-Free 当您调试 找不到gdb.exe解决方案 http://www.programarts.com/ C-Free 官方网站 下载Mingw或者其他编译器 版权声明:本文博主原创文章. ...

  6. 兔子--Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK

    错误原因: Activity打开别的Activity的时候会默认把新的Activity放到自己的task中,所以不用指定,可是别的地方就得指定了. 解决的方法:intent.addFlags(Inte ...

  7. thinkphp 查询

    一.普通查询方式 a.字符串 $arr=$m->where("sex=0 and username='gege'")->find(); b.数组 $data['sex' ...

  8. hdu4745

    区间DP,这类题目还是非常常见的,可惜平时都不怎么在意.一到比赛就弱得像鸟一样,真心囧. 题目要求很简单,就是一个最长的回文子序列,输出该子序列的长度. 区间DP,最常用的一种策略(类似于数学归纳法) ...

  9. php7 install memcache extension

    #download source code package from git $ git clone https://github.com/websupport-sk/pecl-memcache.gi ...

  10. SVN版本控制服务器安装与配置

    版本管理在我们日常学习中一般接触不到,因为我们都是一个人在学习与开发一些练习的项目.但是实际中,一般项目都是协同开发的,这样就需要一个版本管理工具,常见的有SVN/CVS/GitHut等...通过它们 ...