javascriptアニメーションの円形の運動、マウスをめぐって運動して小さいボールを作ります.

 
  
 
  <br>var ball; 
  <br>var mouseX = 100; 
  <br>var mouseY = 100; 
  <br>var angle = 0; 
  <br>var radius = 50; 
  <br> 
  <br>function run(){ 
  <br>if(ball === undefined){ 
  <br>ball = document.createElement("span"); 
  <br>ball.style.position = "absolute"; 
  <br>ball.style.color = "#FF0000"; 
  <br>ball.style.zIndex = 999999999; 
  <br>ball.innerHTML = "●"; 
  <br>document.body.appendChild(ball); 
  <br>} 
  <br> 
  <br>ball.style["left"] = mouseX+(Math.cos(angle)*radius) + "px"; 
  <br>ball.style["top"] = mouseY+(Math.sin(angle)*radius) + "px"; 
  <br>angle+=0.1; 
  <br>} 
  <br>function MousePos(e) 
  <br>{ 
  <br>e = e || window.event; 
  <br>var x,y; 
  <br>if(!document.all){ 
  <br>x = e.pageX; 
  <br>y = e.pageY; 
  <br>} 
  <br>else{ 
  <br>x = event.clientX + document.documentElement.scrollLeft; 
  <br>y = event.clientY + document.documentElement.scrollTop; 
  <br>} 
  <br>return {x:x,y:y}; 
  <br>} 
  <br>function setXY(e) 
  <br>{ 
  <br>e = e || window.event; 
  <br>var pos = MousePos(e); 
  <br>mouseX = pos.x; 
  <br>mouseY = pos.y; 
  <br>} 
  <br>window.onload = function(){ 
  <br>setInterval(run,20); 
  <br> 
  <br>document.documentElement.onmousemove = function(e){ 
  <br>e = e || window.event; 
  <br>setXY(e); 
  <br>}; 
  <br>} 
  <br>