【javascript动画之圆形运动】环绕鼠标运动作小球(兼容ie,ff,chrome,……)

原创文章，转载请注明出处：http://www.cnblogs.com/airy/

 

效果看鼠标的周围吧！！

 

代码如下：

 

  
    

   
     
   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
     >
   
     

   
     var
   
      ball;

   
     var
   
      mouseX 
   
     =
   
      
   
     100
   
     ;

   
     var
   
      mouseY 
   
     =
   
      
   
     100
   
     ;

   
     var
   
      angle 
   
     =
   
      
   
     0
   
     ;

   
     var
   
      radius 
   
     =
   
      
   
     50
   
     ;


   
     function
   
      run(){
 
   
     if
   
     (ball 
   
     ===
   
      undefined){
 ball 
   
     =
   
      document.createElement(
   
     "
   
     span
   
     "
   
     );
 ball.style.position 
   
     =
   
      
   
     "
   
     absolute
   
     "
   
     ;
 ball.style.color 
   
     =
   
      
   
     "
   
     #FF0000
   
     "
   
     ;
 ball.style.zIndex 
   
     =
   
      
   
     999999999
   
     ;
 ball.innerHTML 
   
     =
   
      
   
     "
   
     ●
   
     "
   
     ;
 document.body.appendChild(ball);
 }
 
 ball.style[
   
     "
   
     left
   
     "
   
     ] 
   
     =
   
      mouseX
   
     +
   
     (Math.cos(angle)
   
     *
   
     radius) 
   
     +
   
      
   
     "
   
     px
   
     "
   
     ;
 ball.style[
   
     "
   
     top
   
     "
   
     ] 
   
     =
   
      mouseY
   
     +
   
     (Math.sin(angle)
   
     *
   
     radius) 
   
     +
   
      
   
     "
   
     px
   
     "
   
     ;
 angle
   
     +=
   
     0.1
   
     ;
}

   
     function
   
      MousePos(e)
{
 e 
   
     =
   
      e 
   
     ||
   
      window.event;
 
   
     var
   
      x,y;
 
   
     if
   
     (
   
     !
   
     document.all){
 x 
   
     =
   
      e.pageX;
 y 
   
     =
   
      e.pageY;
 }
 
   
     else
   
     {
 x 
   
     =
   
      e.clientX 
   
     +
   
      document.documentElement.scrollLeft;
 y 
   
     =
   
      e.clientY 
   
     +
   
      document.documentElement.scrollTop;
 }
 
   
     return
   
      {x:x,y:y};
}

   
     function
   
      setXY(e)
{
 e 
   
     =
   
      e 
   
     ||
   
      window.event;
 
   
     var
   
      pos 
   
     =
   
      MousePos(e);
 mouseX 
   
     =
   
      pos.x;
 mouseY 
   
     =
   
      pos.y;
}
window.onload 
   
     =
   
      
   
     function
   
     (){
 setInterval(run,
   
     20
   
     );
 
 document.documentElement.onmousemove 
   
     =
   
      
   
     function
   
     (e){
 e 
   
     =
   
      e 
   
     ||
   
      window.event;
 setXY(e);
 };
}

   
     </
   
     script
   
     >