javascript實(shí)現(xiàn)3D變換的立體圓圈實(shí)例
更新時(shí)間：2015年08月06日 15:53:28 作者：皮蛋
這篇文章主要介紹了javascript實(shí)現(xiàn)3D變換的立體圓圈效果,涉及javascript動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)滾動(dòng)與變色的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(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)文章
一文教你徹底學(xué)會(huì)JavaScript手寫防抖節(jié)流
其實(shí)防抖和節(jié)流不僅僅在面試中會(huì)讓大家手寫，在實(shí)際項(xiàng)目中也可以起到性能優(yōu)化的作用，所以還是很有必要掌握的。本文就帶大家徹底學(xué)會(huì)JavaScript手寫防抖節(jié)流，需要的可以參考一下2022-11-11
這篇文章主要介紹了使用js轉(zhuǎn)化毫秒為時(shí)間格式的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
js刪除對(duì)象中的某一個(gè)字段的方法實(shí)現(xiàn)
這篇文章主要介紹了js刪除對(duì)象中的某一個(gè)字段的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
本文給大家分享js設(shè)置ios中微信瀏覽器中的title的解決方法，實(shí)現(xiàn)原理比較簡(jiǎn)單，對(duì)js微信瀏覽器title相關(guān)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-11-11
JavaScript實(shí)現(xiàn)QueryString獲取GET參數(shù)的方法
本文為大家詳細(xì)介紹下如何通過(guò)JavaScript實(shí)現(xiàn)QueryString獲取GET參數(shù)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
淺談es6中export和export default的作用及區(qū)別
下面小編就為大家分享一篇淺談es6中export和export default的作用及區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了JavaScript獲取select中text值的方法,涉及javascript針對(duì)HTML頁(yè)面元素相關(guān)判斷與獲取操作技巧,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JS集合set類的實(shí)現(xiàn)與使用方法,結(jié)合具體實(shí)例形式分析了javascript集合的創(chuàng)建、元素添加、刪除以及并集、交集、補(bǔ)集等運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
xmlplus組件設(shè)計(jì)系列之樹（Tree）（9）
xmlplus 是一個(gè)JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之tree，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
networkInformation.downlink測(cè)用戶網(wǎng)速方法詳解
這篇文章主要為大家介紹了networkInformation.downlink測(cè)用戶網(wǎng)速方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05