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

2019-11-20 11:53:54

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JavaScript实现文字跟随鼠标特效

下一篇：JavaScript实现自动弹出窗口并自动关闭窗口的方法