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

2015-08-04 17:47作者：yezheng

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

具体代码如下：

<html>

<head>

<title>旋转的圆圈</title>

</head>

<body>

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程序设计有所帮助。