JS_DOM之小球隨鼠標移動事件

DOM事件之鼠標事件——小案例（塊隨鼠標移動事件）

 

html

<img id="ballImg" src="./images/ball-light-2.gif" title="彩色閃爍小球">

js:

 var currentX = 0;
      var currentY = 0;
      var desX = 0;
      var desY = 0; 

         window.onload = function(){
          var ball = document.getElementById("ballImg");

          

          document.addEventListener("mousemove",function(event){
            var e = event||window.event;

            desX = e.clientX - ball.offsetWidth/2;
            desY = e.clientY - ball.offsetHeight/2;
            //console.log(desX+","+dexY);
            move(ball);
          })


       }
       var timer = null;
       function move(ball){
        clearInterval(timer);
         var i = 0;
         var speedX = (desX - currentX)/100;
         var speedY = (desY - currentY)/100;
        timer = setInterval(function(){
           // console.log(desX+","+dexY);
            currentX = currentX + speedX
            currentY = currentY + speedY
            ball.style.left =  currentX+ "px";
            ball.style.top =  currentY + "px";
            i++;
           
            console.log(i)
            if(i == 100){
              ball.style.left =  desX+ "px";
              ball.style.top =  desY + "px";
              clearInterval(timer);
            }
          },1)
       }

 

效果展示：(PS懶得加邊界了哈哈哈哈哈哈就湊合着看？)

 

以上內容，如有錯誤請指出，不甚感激。