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. Codeforces 325D

    #include <cstdio> #include <algorithm> #include <cstring> #include <cstdlib> ...

  2. react-native学习笔记——ViewStack组件

    今天来写一个组件,相信很多人都会用到的——ViewStack. ViewStack组件无疑是UI中很重要的一个组件,可惜react-native并没有内嵌进去,需要开发者自己去实现. 实现原理很简单, ...

  3. 高效 Java Web 开发框架 JessMA v3.2.3 beta-2 发布

    JessMA(原名:Portal-Basic)是一套功能完备的高性能 Full-Stack Web 应用开发框架,内置可扩展的 MVC Web 基础架构和 DAO 数据库访问组件(内部已提供了 Hib ...

  4. Hibernate 1、Hello Hibernate

    所使用到的jar 包: 1.创建实体类 public class User { private Integer id; private String name; private String addr ...

  5. visibleViewController和topViewController 获取当前显示的页面

    原文:http://blog.sina.com.cn/s/blog_881ed8500102vo38.html UINavigationController 中有visibleViewControll ...

  6. 楼天城楼教主的acm心路历程（作为励志用）

    楼主个人博客:小杰博客 利用假期空暇之时,将这几年GCJ,ACM,TopCoder 參加的一些重要比赛作个 回顾.昨天是GCJ2006 的回顾,今天时间上更早一些吧,我如今还清晰记得3 年 前,我刚刚 ...

  7. Coroutine，你究竟干了什么？

    一 引子 使用Unity已经有一段时间了,对于Component.GameObject之类的概念也算是有所了解,而脚本方面从一开始就选定了C#,目前来看还是挺明智的:Boo太小众,而且支持有限:JS( ...

  8. light oj 1027 A Dangerous Maze

    一道数学期望题,唉唉,概率论学的不好啊~~ 求走出迷宫的期望时间. 由于有的门会回到起点,所以有可能会走很多遍,设能走出去的门的个数为n1,总的个数为n,那么一次走出去的概率为n1/n,走一次的用的平 ...

  9. drawable 另外一种形式dimens.xml

    常见的Drawable,放置默认drawable一系列目录,有时候会发现drawable找不到的情况,其实还可以放另外一个目录下 values------->>dimens.xml < ...

  10. javascript 多行字符串

    javascript 字符串多行 平时一般使用 字符串+,或者[].join('')的方式 同事推荐了这样的形式 ExceptionDivHtml="<div class='gameI ...