js螺旋动画效果的具体实例

复制代码代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/HTML 4/松散。DTD ' HTML头元http-equiv=' Content-Type ' Content=' text/HTML；charset=GB18030 ' title Spiral/title script type=' text/JavaScript ' src=' http : js/jquery-1.5。js '/脚本/头体脚本类型=' text/JavaScript ' var Spiral；var yjq(function(){ yjq=function(name，turns，duration，frame，count，reduce _ time){ $(' style。enable _ remove’).移除();$('[id^=test]').css({'position':'absolute '，' width':10，' height':10，' top':300，' left':300，' background ' : ' black ' })；螺旋（名称' 1 ',600,300,300,300,300,圈数，持续时间，帧);螺旋（名称' 2 ',300,0,300,300,300,转弯，持续时间，帧);螺旋（名称' 3 ',0,300,300,300,转弯，持续时间，帧);螺旋（名称' 4 ',300,600,300,300,300,转弯，持续时间，帧);$("#"名称"1")。CSS({ '-网页套件-动画' :名称' 1 '持续时间ms linear ' count })；$("#"名称"2")。CSS({ '-网页套件-动画' :名称' 2 '持续时间ms linear ' count })；$("#"名称"3")。CSS({ '-网页套件-动画' :名称' 3 '持续时间ms linear ' count })；$("#"名称"4")。CSS({ '-网页套件-动画' :名称' 4 '持续时间ms linear ' count })；var arg=参数；$("#"名称"4")。one('webkitAnimationEnd '，function(){ if(duration=0){ return；} arg .被呼叫者(名称、回合、持续时间-=减少时间，帧、计数、减少_时间)；});}螺旋=函数(名称，w1，h1，w2，h2，N，T，帧){ var interval=T/帧；//每帧间隔var n；//圈数var I=0；var k；//初始象限var R=Math.sqrt(Math.pow(w2-w1，2) Math.pow(h2-h1，2)，2)；//半径var style="@-web工具包-关键帧"名称"{ 0 }";var style DoM=$(' style class=' enable _ remove '/style ')；if(w1w 2 h1=H2){ k=1；}否则if(w1=w2 h1 H2){ k=2；} else if(w1w 2 h1=H2){ k=3；} else { k=4；} for(var t=0；TT；T=区间){ var t1=T %(T/N)；n=数学地板(吨/(吨/年))；x=H2-R *(1-t1/T-N/N)*数学。cos(2 *数学.PI*t1*N/T数学幂(-1，k)*数学。数学。ABS(w2-w1)/数学。ABS(H2-h1))(k2？1:0)*(k%2？-1:1)*数学. PI)；y=w2-R *(1-t1/T-N/N)*数学罪恶(2 *数学* t1 * N/T数学幂(-1，k)*数学。数学。ABS(w2-w1)/数学。ABS(H2-h1))(k2？1:0)*(k%2？-1:1)*数学. PI)；style=(I)* 100/帧“% { top : ' x ' pxleft : ' y ' px }”；} style=' 100% { top : ' w2 ' px；left: ' h2 ' px } }styleDom.html(样式);$(“头”).追加(样式DoM)；};})();$(function(){ var name=' test '；定义变量匝数=5;//旋转圈数定义变量持续时间=2000;//子动画耗时var reduce _ time=100//每次子动画耗时减少量var frame=1000/子动画帧数定义变量计数=2;//子动画执行次数yjq(名称、回合、持续时间、帧、计数、减少_时间)；});/script div id=' test1 '/div div id=' test2 '/div div id=' test3 '/div div id=' test4 '/div/body/html(9500 . 163.com)