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