javascript实现3D变换的立体圆圈实例

本文实例讲述了javascript实现3D变换的立体圆圈。分享给大家供大家参考。具体如下：
这里使用javascript实现会变换的立体圆圈，在网页3D变化，变色的圆圈特效，网页上的3d圆圈特效。圆圈上的每一点的颜色并不一样，在黑色的网页背景下更能看清楚。
运行效果如下图所示：

具体代码如下：

<html><head><title>变色的圆圈</title><style type="text/css"><！--body {background-color: #000000;}--></style></head><body><script language="JavaScript">var CoLoUrS=new Array（"ff0000","ffffff","0000ff","ffffff"）;var dots=16;var step=0.3;var a_StEp=0.05;var RunTime=Xpos =Ypos =count_a=count=currStep =0;var cntr=70;var move_a=move=1;var curColour;document.write（"<div id="moveDiv" style="position:absolute;top:0px;left:0px">"）;for （i=0; i < dots; i++）{document.write（"<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>"）;}document.write（"</div>"）;var x = moveDiv.all;var numdiv=new Array（x[0],x[1],x[2],x[3],x[4],x[5],x[6],x[7],x[8],x[9],x[10],x[11],x[12],x[13],x[14],x[15]）;function colourStep（）{count+=move;if （count >= numdiv.length） {count=0;count_a+=move}if （count_a == CoLoUrS.length） count_a=0;numdiv[count].style.background=CoLoUrS[count_a];setTimeout（"colourStep（）",100）}function divmove（）{Ypos = document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos（（RunTime）/3）*Math.cos（RunTime/10）;Xpos= document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin（（RunTime）/5）*Math.sin（RunTime/20）;RunTime+=a_StEp;Tma=setTimeout（"divmove（）", 10）;}function overturn（）{for （i=0;i<numdiv.length;i++）{numdiv[i].style.top = Ypos+cntr*Math.cos（（currStep + i*4）/10.2）*Math.cos（currStep/10）;numdiv[i].style.left= Xpos+cntr*Math.sin（（currStep + i*4）/10.2）;}currStep+=step;setTimeout（"overturn（）",10）;}function Shrink（）{cntr-=0.5;GoShrink=setTimeout（"Shrink（）",10）;if （cntr <=20）{clearTimeout（GoShrink）;Swell（）}}function Swell（）{cntr+=0.5;GoSwell=setTimeout（"Swell（）",10）;if （cntr >=70）{clearTimeout（GoSwell）;Shrink（）}}function transfer（）{divmove（）;//移动层overturn（）;//使层进行翻转Shrink（）;//改变层的大小colourStep（）;//变换层的颜色}transfer（）;</script></body></html>

希望本文所述对大家的javascript程序设计有所帮助。