首页 > 代码库 > 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之小球随鼠标移动事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。