Javascript实现可旋转的圆圈实例代码

本文实例讲述了Javascript实现可旋转的圆圈。分享给大家供大家参考。具体如下：
这里基于Javascript实现会旋转的圆圈，有点三维变幻的效果，立体感很强，代码主要是基于JS，学习Js脚本编程来说，是个学习JS生成动画的好范例。
运行效果如下图所示：

具体代码如下：

<html><head><title>旋转的圆圈</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><script 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 < amount; i++）document.write（"<div id="Div" style="position:absolute;top:0px;left:0px;height:20;width:20;text-align:center"><B>.</B></div>"）;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 < amount; i++）{var d=Div[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（）;</script></body></html>

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