Beispiele zur Erläuterung der Implementierung eines drehbaren Kreises mit Javascript-js-Tutorial-php.cn

Beispiele zur Erläuterung der Implementierung eines drehbaren Kreises mit Javascript

巴扎黑

Freigeben： 2017-09-06 10:27:52

Original

2117 Leute haben es durchsucht

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

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

运行效果如下图所示：

具体代码如下：

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Implementierung eines drehbaren Kreises mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!