Maison > Article > interface Web > Exemples pour expliquer comment implémenter un cercle rotatif en utilisant Javascript

Exemples pour expliquer comment implémenter un cercle rotatif en utilisant Javascript

巴扎黑original: 2017-09-06 10:27:522111parcourir

本文实例讲述了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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumer diverses utilisations courantes des tableaux JavaScriptArticle suivant：Résumer diverses utilisations courantes des tableaux JavaScript

Articles Liés

Voir plus