本文實(shí)例講述了javascript實(shí)現(xiàn)3D變換的立體圓圈。分享給大家供大家參考。具體如下：
這里使用javascript實(shí)現(xiàn)會(huì)變換的立體圓圈，在網(wǎng)頁(yè)3D變化，變色的圓圈特效，網(wǎng)頁(yè)上的3d圓圈特效。圓圈上的每一點(diǎn)的顏色并不一樣，在黑色的網(wǎng)頁(yè)背景下更能看清楚。
運(yùn)行效果如下圖所示：
具體代碼如下：
<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(); //移動(dòng)層 overturn(); //使層進(jìn)行翻轉(zhuǎn) Shrink(); //改變層的大小 colourStep(); //變換層的顏色}transfer();</script></body></html>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
