Js特效 旋转的文字
今天分享两个Js特效，主要是里面的数学关系难搞清楚，要自己好好研究研究才行。
第一个版本：旋转的文字
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>旋转的文字</title> 5 </head> 6 <body> 7 <div id="mydiv" style="width:400px; height: 100px; position:absolute;left:500;top:30;"> 8 </div> 9 10 <script type="text/javascript"> 11 var messageinfo="欢迎来到晨风世界"; 12 var Balises="" 13 var Taille=40; 14 var Midx=100; 15 var Decal=0.6; 16 for (x=messageinfo.length-1;x>=0;x--){ 17 Balises=Balises + '<div id=L' + x + ' style="width:3;position:absolute;top:10;left:10">' + messageinfo[x] + '</DIV>' 18 } 19 var div=document.getElementByIdx_x_x("mydiv"); 20 div.innerHTML=Balises; 21 window.setInterval("Minfo()",50); 22 23 var Alpha=5; 24 25 function Minfo(){ 26 Alpha=Alpha-0.05; 27 for (x=0;x<messageinfo.length;x++){ 28 var Alpha1=Alpha+Decal*x; 29 var Cosine=Math.cos(Alpha1); 30 var Ob=document.all("L"+x); 31 Ob.style.left=Midx+100*Math.sin(Alpha1); 32 Ob.style.fontSize=Taille+25*Cosine; 33 Ob.style.color="rgb("+ (160+Cosine*80+50) + ","+ (150+Cosine*80+50) + ",0)"; 34 } 35 } 36 </script> 37 </body> 38 </html>
第二个版本，由于有一些函数在chrome浏览器不支持，所以这个版本只能正常运行在IE内核的浏览器里。
这个效果是摆动的文字，可以用来在页首表示欢迎的导语。
代码如下：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>摆尾文字</title> 5 <style type="text/css"> 6 </style> 7 </head> 8 <body> 9 <div id="mydiv" style="width:400px; height: 100px; background-color: #000; padding-top: 20px; padding-right: 15px;"> 10 </div> 11 12 <script language=javascript> 13 var messageinfo="欢迎来到晨风世界"; 14 var Balises="" 15 var Taille=40; 16 var Midx=100; 17 var Decal=0.6; 18 for (x=messageinfo.length-1;x>=0;x--){ 19 Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;float:right;">' + messageinfo.charAt(x) + '</DIV>' 20 } 21 var div=document.getElementByIdx_x_x("mydiv"); 22 div.innerHTML=Balises; 23 window.setInterval("Minfo()",70); 24 25 var Alpha=5; 26 27 function Minfo(){ 28 Alpha=Alpha-0.05; 29 for (x=0;x<messageinfo.length;x++){ 30 var Alpha1=Alpha+Decal*x; 31 var Cosine=Math.cos(Alpha1); 32 var Ob=document.all("L"+x); 33 Ob.style.left=Midx+100*Math.sin(Alpha1); 34 Ob.style.fontSize=Taille+25*Cosine; 35 Ob.style.color="rgb("+ (160+Cosine*80+50) + ","+ (50+Cosine*80+50) + ",0)"; 36 } 37 } 38 </script> 39 </body> 40 </html>
