首页 > 代码库 > JS_DOM之小球随鼠标移动事件

JS_DOM之小球随鼠标移动事件

DOM事件之鼠标事件——小案例(块随鼠标移动事件)

 

html

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

js:

 1  var currentX = 0; 2       var currentY = 0; 3       var desX = 0; 4       var desY = 0;  5  6          window.onload = function(){ 7           var ball = document.getElementById("ballImg"); 8  9           10 11           document.addEventListener("mousemove",function(event){12             var e = event||window.event;13 14             desX = e.clientX - ball.offsetWidth/2;15             desY = e.clientY - ball.offsetHeight/2;16             //console.log(desX+","+dexY);17             move(ball);18           })19 20 21        }22        var timer = null;23        function move(ball){24         clearInterval(timer);25          var i = 0;26          var speedX = (desX - currentX)/100;27          var speedY = (desY - currentY)/100;28         timer = setInterval(function(){29            // console.log(desX+","+dexY);30             currentX = currentX + speedX31             currentY = currentY + speedY32             ball.style.left =  currentX+ "px";33             ball.style.top =  currentY + "px";34             i++;35            36             console.log(i)37             if(i == 100){38               ball.style.left =  desX+ "px";39               ball.style.top =  desY + "px";40               clearInterval(timer);41             }42           },1)43        }

 

效果展示:(PS懒得加边界了哈哈哈哈哈哈就凑合着看?)

 

<style></style>

 

 
<script type="text/javascript">// </script>

 

以上内容,如有错误请指出,不甚感激。

JS_DOM之小球随鼠标移动事件