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>

 

posted @ 2012-11-02 11:04  晨风世界  阅读(763)  评论(0编辑  收藏  举报