JavaScript事件监听【mousemove】鼠标跟随事件

如果我们想让鼠标变样子，应该怎么去写呢，那么，第一的想法就是鼠标监听事件

    <style>
        .box1{
            width: 30px;
            height: 30px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
<div class = "box1"></div>

我们这是已经在页面里写了一个30px的红色圆形，我们要让他跟着我们的鼠标移动。首先我们要拿到这个box1的节点

var pic = document.querySelector(".box1")

然后我们要给鼠标添加一个鼠标事件

document.addEventListener('mousemove',function(e){
}

这里的e指的是event，

这里的意思是只要我们鼠标移动1px 就会触发这个事件

这时候我们就有种疑问？？？？怎么才能证明我用了这个鼠标事件呢！当然是打印e了，然后用pageY看鼠标的坐标 这样我们就可以看出，只要鼠标一移动，我们的右边就会打印一遍鼠标的坐标。

var x = e.pageX;
var y = e.pageY;

然后分别设置两个变量，赋值刚刚的x y轴坐标

pic.style.left = x -20 + 'px';
pic.style.top = y - 20 + 'px';

紧接着带入pic，就是我们红色的圆圈里，这里的-20是鼠标在红色圆圈的位子，“px”必须加，然后页面中的距离是px 为单位的。

这个时候我们的红色圆圈还是不能跟着鼠标一起动。

在box1的css里加在一句：position：relative；

这样你的红色圆圈就可以跟着鼠标动起来了。