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

最新推荐文章于 2024-05-15 20:43:52 发布

diaozhuochuan9223

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量222

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lizihong/p/4325859.html

版权

HTML页面:

<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"><

页面CSS：

/*CSS源代码*/
#container{
position: absolute;
width: 320px;
height: 320px;
border:1px solid #ccc;
}
#first{
width: 100px;
height: 100px;
background: orange;
}
#second{
width: 100px;
height: 100px;
background: red;
position: absolute;
right:0;
bottom:0;
}

JS:

/*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();
        }
    });
})();

转载于:https://www.cnblogs.com/lizihong/p/4325859.html

diaozhuochuan9223

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

HTML页面:<div id="container"> <div id="first"></div> <div id="second"></div></div><!-- 推荐开源CDN来选取...
复制链接

扫一扫