Javascript implémente des compétences code_javascript d'exemple de cercle rotatif-js tutoriel-php.cn

Javascript implémente des compétences code_javascript d'exemple de cercle rotatif

WBOY

Libérer： 2016-05-16 15:47:28

original

1662 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter un cercle rotatif à l'aide de Javascript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici un cercle tournant basé sur Javascript, qui a un effet quelque peu tridimensionnel et un fort effet tridimensionnel. Le code est principalement basé sur JS. Pour apprendre la programmation de scripts JS, c'est un bon exemple pour apprendre JS. pour générer des animations.

L'effet de l'opération est comme indiqué ci-dessous :

Le code spécifique est le suivant :

<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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.