实例讲解Javascript实现可旋转的圆圈

本文实例讲述了javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下：

这里基于Javascript实现会旋转的圆圈，有点三维变幻的效果，立体感很强，代码主要是基于JS，学习Js脚本编程来说，是个学习JS生成动画的好范例。

运行效果如下图所示：

墨狐AI

5分钟生成万字小说，人人都是小说家！

下载

具体代码如下：

立即学习“Java免费学习笔记（深入）”；

zuojiankuohaophpcnhtml>
zuojiankuohaophpcnhead>
zuojiankuohaophpcntitle>旋转的圆圈zuojiankuohaophpcn/title>
zuojiankuohaophpcnmeta http-equiv="Content-Type" content="text/html; charset=gb2312">
zuojiankuohaophpcn/head>
zuojiankuohaophpcnbody>
zuojiankuohaophpcnscript language="JavaScript">
amount=ybase=15;
Color="#ffaaff";
GlowColor="#ff00ff";
xbase=-70;
step=c=0.05;
TrigSplit=360/amount;
xpos=ypos=currStep=Ci=0;
for (i=0; i zuojiankuohaophpcn amount; i++)
  document.write("zuojiankuohaophpcnp id="p" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center">zuojiankuohaophpcnB>.zuojiankuohaophpcn/B>zuojiankuohaophpcn/p>");
function running(){
  var MY=document.body.scrollTop+document.body.clientHeight/2 + document.body.clientHeight/2.8*Math.cos((Ci)/4)*Math.cos(Ci/10);
  var MX=document.body.scrollLeft+document.body.clientWidth/2 + document.body.clientWidth/2.4*Math.sin((Ci)/6)*Math.sin(Ci/20);
  ypos=MY;
  xpos=MX;
  for (i=0; i zuojiankuohaophpcn amount; i++){
    var d=p[i].style;
    if (d.pixelTop > ypos+2){
      d.fontSize=18;
       d.paddingTop=7;
       d.filter="glow(color="+GlowColor+", strength=7)";
      if (d.pixelTop > ypos+10){
         d.fontSize=15;
        d.paddingTop=10;
        d.filter="glow(color="+GlowColor+", strength=5)";
       }
    }
    else{
      d.fontSize=25;
       d.paddingTop=0;
      d.color=Color;
       d.filter="glow(color="+GlowColor+", strength=8)";
    }
    d.top=ypos+ybase*Math.sin(currStep+i*TrigSplit*Math.PI/180);
    d.left=xpos+xbase*Math.cos(currStep+i*TrigSplit*Math.PI/180);
  }
  Ci+=c;
  currStep+=step;
  setTimeout("running()",20);
}
running();
zuojiankuohaophpcn/script>
zuojiankuohaophpcn/body>
zuojiankuohaophpcn/html>