【WorkTile贊助】jQuery編程挑戰#009：生成兩個div元素互相追逐的動畫

時間 2019-11-16

標籤 WorkTile贊助 jquery 編程挑戰生成兩個 div 元素互相追逐動畫欄目 JQuery 简体版

原文原文鏈接

HTML頁面:javascript

<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:java

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。