코드 복사 코드는 다음과 같습니다. <머리> 나선형 <본문> <br>var 나선형; <br>var yjq; <br>(function(){ <br> yjq = function(name,turns,duration,frame,count,decrease_time){ <br> $('style.enable_remove').remove(); <br> $(' [id^=test]').css({'위치':'절대','너비':10,'높이':10,'상단':300,'왼쪽':300,'배경':'검은색 '}); <br> 나선형(이름 '1',600,300,300,300,회전,기간,프레임); <br> 나선형(이름 '2',300,0,300,300,회전,기간,프레임); <br> '3',0,300,300,300,회전수,기간,프레임); <br> 나선형(이름 '4',300,600,300,300,회전수,기간,프레임); <br> $('#' 이름 '1').css({" -webkit-animation":name "1 " 기간 "ms 선형 " 개수}); <br> $('#' 이름 '2').css({"-webkit-animation":name "2 " 기간 "ms 선형 " 개수}); <br> $('#' 이름 '3').css({"-webkit-animation":name "3 " 기간 "ms 선형 " 개수}); <br> $('# ' name '4').css({"-webkit-animation":name "4 " 기간 "ms 선형 " 개수}); <br> var arg = 인수; <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> 나선형 = 함수(이름,w1,h1,w2,h2,N,T,프레임){ <BR> var 간격 = 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 " 이름 "{"; <BR> var styleDom=$("<style class='enable_remove'></style>"); <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> 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> 스타일 =(i )*100/프레임 '%{top:' x 'px;left:' y 'px;}'; ").append(styleDom); <br> }; <br>})(); <br>$(function(){ <br> var name = 'test'; <br> varturns = 5; // 회전수 <br> var Duration = 2000;//하위 애니메이션 시간 소모 <br> var 감소_time = 100;//하위 애니메이션별 시간 소모 감소량 <br> var 프레임 = 1000; //하위 애니메이션 프레임 수 <br> var count = 2;//하위 애니메이션 실행 수 <br> yjq(name,turns,duration,frame,count,decrease_time) <br>}); > < div id="test1">
