主页 / 网络编程 /

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

网络编程 2021-07-04 21:48www.168986.cn编程入门
这篇文章主要介绍了javascript实现3D变换的立体圆圈效果,涉及javascript动态操作页面元素实现滚动与变色的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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 tr=70;
var move_a=move=1;
var curColour;
document.write('<div id="moveDiv" style="position:absolute;:0px;left:0px">');
for (i=0; i < dots; i++){
  document.write('<div style="position:absolute;: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.8Math.cos((RunTime)/3)Math.cos(RunTime/10);
  Xpos= document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4Math.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. = Ypos+trMath.cos((currStep + i4)/10.2)Math.cos(currStep/10);
    numdiv[i].style.left= Xpos+trMath.sin((currStep + i4)/10.2);
  }
  currStep+=step;
  setTimeout("overturn()",10);
}
function Shrink(){
  tr-=0.5;
  GoShrink=setTimeout('Shrink()',10);
  if (tr <=20){clearTimeout(GoShrink);Swell()}
}
function Swell(){
  tr+=0.5;
  GoSwell=setTimeout('Swell()',10);
  if (tr >=70){clearTimeout(GoSwell);Shrink()}
}
function transfer(){
  divmove();  //移动层
  overturn();  //使层进行翻转
  Shrink();  //改变层的大小
  colourStep();  //变换层的颜色
}
transfer();
</script>
</body>
</html>

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

上一篇：JavaScript实现文字跟随鼠标特效 下一篇：JavaScript实现自动弹出窗口并自动关闭窗口的方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by