复制代码 代码如下: Spiral <BR>var Spiral; <BR>var yjq; <BR>(function(){ <BR> yjq = function(name,turns,duration,frame,count,decrease_time){ <BR> $('style.enable_remove').remove(); <BR> $('[id^=test]').css({'position':'absolute','width':10,'height':10,'top':300,'left':300,'background':'black'}); <BR> Spiral(name+'1',600,300,300,300,turns,duration,frame); <BR> Spiral(name+'2',300,0,300,300,turns,duration,frame); <BR> Spiral(name+'3',0,300,300,300,turns,duration,frame); <BR> Spiral(name+'4',300,600,300,300,turns,duration,frame); <BR> $('#'+name+'1').css({"-webkit-animation":name+"1 "+duration+"ms linear "+count}); <BR> $('#'+name+'2').css({"-webkit-animation":name+"2 "+duration+"ms linear "+count}); <BR> $('#'+name+'3').css({"-webkit-animation":name+"3 "+duration+"ms linear "+count}); <BR> $('#'+name+'4').css({"-webkit-animation":name+"4 "+duration+"ms linear "+count}); <BR> var arg = arguments; <BR> $("#"+name+"4").one('webkitAnimationEnd',function(){ <BR> if(duration<=0){ <BR> return; <BR> } <BR> arg.callee(name,turns,duration-=decrease_time,frame,count,decrease_time); <BR> }); <BR> } <BR> Spiral = function(name,w1,h1,w2,h2,N,T,frame){ <BR> var interval = T/frame;//姣忓抚闂撮殧 <BR> var n;//鍦堟暟 <BR> var i = 0; <BR> var k;//鍒濆璞￠檺 <BR> var R = Math.sqrt(Math.pow(w2-w1,2)+Math.pow(h2-h1,2),2);//鍗婂緞 <BR> var style="@-webkit-keyframes "+name+"{"; <BR> var styleDom=$("<style class='enable_remove'>"); <BR> if(w1>w2 && h1<=h2){ <BR> k = 1; <BR> }else if(w1<=w2 && h1<h2){ <BR> k = 2; <BR> }else if(w1<w2 && h1>=h2){ <BR> k = 3; <BR> }else { <BR> k = 4; <BR> } <BR> for(var t=0;t<T;t+=interval){ <BR> var t1 = t%(T/N); <BR> n = Math.floor(t/(T/N)); <BR> x = h2-R*(1-t1/T-n/N)*Math.cos(2*Math.PI*t1*N/T+Math.pow(-1,k)*Math.atan(Math.abs(w2-w1)/Math.abs(h2-h1))+(k>2?1:0)*(k%2?-1:1)*Math.PI); <BR> y = w2-R*(1-t1/T-n/N)*Math.sin(2*Math.PI*t1*N/T+Math.pow(-1,k)*Math.atan(Math.abs(w2-w1)/Math.abs(h2-h1))+(k>2?1:0)*(k%2?-1:1)*Math.PI); <BR> style+=(i++)*100/frame+'%{top:'+x+'px;left:'+y+'px;} '; <BR> } <BR> style+='100%{top:'+w2+'px;left:'+h2+'px;}}'; <BR> styleDom.html(style); <BR> $("head").append(styleDom); <BR> }; <BR>})(); <BR>$(function(){ <BR> var name = 'test'; <BR> var turns = 5;//鏃嬭浆鍦堟暟 <BR> var duration = 2000;//瀛愬姩鐢昏
