Javascript脚本特效示例：[3]旋转变换文字

时间：2024-11-21 10:33:29

1、在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。<html><head><title>晓博JavaScript飘雪特效测试</title></head><body><div id="zy"> <div id="login"></div> <div id="daohang"> <ul> <li><a href="index.html">首页</a></li> <li><a href="jianjie.html">七夕简介</a></li> <li><a href="#">七夕节传说</a></li> <li><a href="#">七夕节习俗</a></li> <li><a href="#">诗词& 歌谣</a></li> <li><a href="#">七夕节寄语</a></li> </ul> </div></div></body></html>

2、第一步:把如下代码加入<head>区域中，并重名文档为HTML文件<SCRIPT language=javascript>Phrase="晓博晓博JS特效测试"Balises="晓博晓博JavaScript特效测试欢迎你的光临"Taille=40;Midx=100;Decal=0.5;Nb=Phrase.length;y=-10000;for (x=0;x<Nb;x++){ Balises=Balises + '<DIV Id=L' + x + ' STYLE="width:3;font-family: Courier New;font-weight:bold;position:absolute;top:40;left:50;z-index:0">' + Phrase.charAt(x) + '</DIV>'}document.write (Balises);Time=window.setInterval("Alors()",10);Alpha=5;I_Alpha=0.05;function Alors(){ Alpha=Alpha-I_Alpha; for (x=0;x<Nb;x++){ Alpha1=Alpha+Decal*x; Cosine=Math.cos(Alpha1); Ob=document.all("L"+x); Ob.style.posLeft=Midx+100*Math.sin(Alpha1)+50; Ob.style.zIndex=20*Cosine; Ob.style.fontSize=Taille+25*Cosine; Ob.style.color="rgb("+ (27+Cosine*80+50) + ","+ (127+Cosine*80+50) + ",0)"; }}</SCRIPT>

3、用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到旋转变换文字特效，如下图