JavaScript实现div块跟随鼠标移动效果

JavaScript实现div块跟随鼠标移动效果

前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图：

HTML代码：

<div id="box"></div>

CSS代码：

*{margin: 0;padding: 0;}body{width: 2000px;height: 2000px;}#box{width: 200px;height: 200px;background: yellow;position: absolute;}

JS代码：

var oBox=document.getElementById("box");document.onmousemove=function(ev){var ev=ev||window.event;// 获取鼠标指针坐标// console.log(ev.clientX,ev.clientY);oBox.style.top=ev.pageY+"px";oBox.style.left=ev.pageX+"px";}

注意：实现功能的核心是鼠标移动时获取鼠标指针的坐标，然后讲坐标赋值给div块的left，top属性。

视频讲解链接：

/video/BV1Cg4y1i7sr/