您的位置：首页 > Web前端 > JQuery

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

2015-03-10 13:53 169 查看

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:

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航