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

2019-11-20 11:55:39

字体：大中小

来源：转载

供稿：网友

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

上一篇：JavaScript实现选择框按比例拖拉缩放的方法

下一篇：JavaScript数组各种常见用法实例分析