论坛风格切换
您好，欢迎光临本站!   登录 注册新用户
发帖 回复
  • 2760阅读
  • 1回复

[jsp]js螺旋动画效果的具体实例 [复制链接]

 上一主题 下一主题
悠然南山
总版主
 

发帖
6808
黑豆
158
威望
24650
贡献值
0
交易币
0
红豆
426
只看楼主 倒序阅读 0 发表于: 2013-11-15
复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=GB18030">  
  5. <title>Spiral</title>  
  6. <script type="text/javascript" src="js/jquery-1.5.js"></script>  
  7. </head>  
  8. <body>  
  9. <script type="text/javascript">  
  10. var Spiral;  
  11. var yjq;  
  12. (function(){  
  13.     yjq = function(name,turns,duration,frame,count,decrease_time){  
  14.         $('style.enable_remove').remove();  
  15.         $('[id^=test]').css({'position':'absolute','width':10,'height':10,'top':300,'left':300,'background':'black'});  
  16.         Spiral(name+'1',600,300,300,300,turns,duration,frame);  
  17.         Spiral(name+'2',300,0,300,300,turns,duration,frame);  
  18.         Spiral(name+'3',0,300,300,300,turns,duration,frame);  
  19.         Spiral(name+'4',300,600,300,300,turns,duration,frame);  
  20.         $('#'+name+'1').css({"-webkit-animation":name+"1 "+duration+"ms linear "+count});  
  21.         $('#'+name+'2').css({"-webkit-animation":name+"2 "+duration+"ms linear "+count});  
  22.         $('#'+name+'3').css({"-webkit-animation":name+"3 "+duration+"ms linear "+count});  
  23.         $('#'+name+'4').css({"-webkit-animation":name+"4 "+duration+"ms linear "+count});  
  24.         var arg = arguments;  
  25.         $("#"+name+"4").one('webkitAnimationEnd',function(){  
  26.             if(duration<=0){  
  27.                 return;  
  28.             }  
  29.             arg.callee(name,turns,duration-=decrease_time,frame,count,decrease_time);  
  30.         });  
  31.     }  
  32.     Spiral = function(name,w1,h1,w2,h2,N,T,frame){  
  33.         var interval = T/frame;//每帧间隔  
  34.         var n;//圈数  
  35.         var i = 0;  
  36.         var k;//初始象限  
  37.         var R = Math.sqrt(Math.pow(w2-w1,2)+Math.pow(h2-h1,2),2);//半径  
  38.         var style="@-webkit-keyframes "+name+"{";  
  39.         var styleDom=$("<style class='enable_remove'></style>");  
  40.         if(w1>w2 && h1<=h2){  
  41.             k = 1;  
  42.         }else if(w1<=w2 && h1<h2){  
  43.             k = 2;  
  44.         }else if(w1<w2 && h1>=h2){  
  45.             k = 3;  
  46.         }else {  
  47.             k = 4;  
  48.         }  
  49.         for(var t=0;t<T;t+=interval){  
  50.             var t1 = t%(T/N);  
  51.             n = Math.floor(t/(T/N));  
  52.             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);  
  53.             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);  
  54.             style+=(i++)*100/frame+'%{top:'+x+'px;left:'+y+'px;} ';  
  55.         }  
  56.         style+='100%{top:'+w2+'px;left:'+h2+'px;}}';  
  57.         styleDom.html(style);  
  58.         $("head").append(styleDom);  
  59.     };  
  60. })();  
  61. $(function(){  
  62.     var name = 'test';  
  63.     var turns = 5;//旋转圈数  
  64.     var duration = 2000;//子动画耗时  
  65.     var decrease_time = 100;//每次子动画耗时减少量  
  66.     var frame = 1000;//子动画帧数  
  67.     var count = 2;//子动画执行次数  
  68.     yjq(name,turns,duration,frame,count,decrease_time);  
  69. });  
  70. </script>  
  71. <div id="test1"></div>  
  72. <div id="test2"></div>  
  73. <div id="test3"></div>  
  74. <div id="test4"></div>  
  75. </body>  
  76. </html>
回复
举报
发帖 回复
快速回复
限100 字节
 
上一个 下一个