<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Spiral</title>
<script type="text/javascript" src="js/jquery-1."></script>
</head>
<body>
<script type="text/javascript">
var Spiral;
var yjq;
(function(){
yjq = function(name,turns,duration,frame,count,decrease_time){
$('style.enable_remove').remove();
$('[id^=test]').css({'position':'absolute','width':10,'height':10,'top':300,'left':300,'background':'black'});
Spiral(name+'1',600,300,300,300,turns,duration,frame);
Spiral(name+'2',300,0,300,300,turns,duration,frame);
Spiral(name+'3',0,300,300,300,turns,duration,frame);
Spiral(name+'4',300,600,300,300,turns,duration,frame);
$('#'+name+'1').css({"-webkit-animation":name+"1 "+duration+"ms linear "+count});
$('#'+name+'2').css({"-webkit-animation":name+"2 "+duration+"ms linear "+count});
$('#'+name+'3').css({"-webkit-animation":name+"3 "+duration+"ms linear "+count});
$('#'+name+'4').css({"-webkit-animation":name+"4 "+duration+"ms linear "+count});
var arg = arguments;
$("#"+name+"4").one('webkitAnimationEnd',function(){
if(duration<=0){
return;
}
(name,turns,duration-=decrease_time,frame,count,decrease_time);
});
}
Spiral = function(name,w1,h1,w2,h2,N,T,frame){
var interval = T/frame;//Add interval per frame
var n;//Number of loops
var i = 0;
var k;//Initial Quadrant
var R = ((w2-w1,2)+(h2-h1,2),2);//Radius
var style="@-webkit-keyframes "+name+"{";
var styleDom=$("<style class='enable_remove'></style>");
if(w1>w2 && h1<=h2){
k = 1;
}else if(w1<=w2 && h1<h2){
k = 2;
}else if(w1<w2 && h1>=h2){
k = 3;
}else {
k = 4;
}
for(var t=0;t<T;t+=interval){
var t1 = t%(T/N);
n = (t/(T/N));
x = h2-R*(1-t1/T-n/N)*(2**t1*N/T+(-1,k)*((w2-w1)/(h2-h1))+(k>2?1:0)*(k%2?-1:1)*);
y = w2-R*(1-t1/T-n/N)*(2**t1*N/T+(-1,k)*((w2-w1)/(h2-h1))+(k>2?1:0)*(k%2?-1:1)*);
style+=(i++)*100/frame+'%{top:'+x+'px;left:'+y+'px;} ';
}
style+='100%{top:'+w2+'px;left:'+h2+'px;}}';
(style);
$("head").append(styleDom);
};
})();
$(function(){
var name = 'test';
var turns = 5;//Number of rotation
var duration = 2000;//Sub-animation takes time
var decrease_time = 100;//Each sub-animation takes less time
var frame = 1000;//number of sub-animation frames
var count = 2;//Number of subanimation execution times
yjq(name,turns,duration,frame,count,decrease_time);
});
</script>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</body>
</html>