javascript實(shí)現(xiàn)3D變換的立體圓圈實(shí)例
本文實(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ì)有所幫助。
相關(guān)文章
分享兩個(gè)手機(jī)訪問(wèn)pc網(wǎng)站自動(dòng)跳轉(zhuǎn)手機(jī)端網(wǎng)站代碼
這篇文章主要介紹了分享兩個(gè)手機(jī)訪問(wèn)pc網(wǎng)站自動(dòng)跳轉(zhuǎn)手機(jī)端網(wǎng)站代碼,需要的朋友可以參考下2015-01-01初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例
下面小編就為大家分享一篇初探j(luò)s和簡(jiǎn)單隱藏效果的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11javascript簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
本文是給大家分享一段簡(jiǎn)單的實(shí)現(xiàn)圖片預(yù)加載技術(shù)的javascript代碼,超級(jí)精簡(jiǎn),卻很實(shí)用,這里推薦給大家2014-12-12JS關(guān)鍵字變色實(shí)現(xiàn)思路及代碼
JS關(guān)鍵字變色詳細(xì)很多朋友都很想實(shí)現(xiàn)吧接下來(lái)將執(zhí)行以下幾個(gè)步驟:1.替換關(guān)鍵字,對(duì)字體變色2.用正則,CSS背景變色;該方法可結(jié)合前臺(tái)JS調(diào)用,感興趣的朋友可以參考下,希望可以幫助到你2013-02-02bootstrap實(shí)現(xiàn)點(diǎn)擊刪除按鈕彈出確認(rèn)框的實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了bootstrap實(shí)現(xiàn)點(diǎn)擊刪除按鈕彈出確認(rèn)框的方法,需要的朋友參考下吧2018-08-08仿google adsense顏色選擇器代碼,從中易廣告聯(lián)盟程序提取
仿google adsense顏色選擇器代碼,從中易廣告聯(lián)盟程序提取...2007-11-11原生javascript圖片自動(dòng)或手動(dòng)切換示例附演示源碼
圖片自動(dòng)或手動(dòng)切換,想必會(huì)在很多地方有見(jiàn)過(guò)吧,本文將為大家介紹的是使用原生javascript實(shí)現(xiàn)的焦點(diǎn)圖切換,感興趣的朋友可以參考下2013-09-09