首先感觉鼠标在页面上一个箭头太枯燥了
设计思想:首先获取图片
然后获取鼠标进入页面的坐标
最后将鼠标的坐标给到图片上如下
附上CSS的样式代码
.box {
width: 400px;
height: 4000px;
background-image: url('你所需要的图片位置') no-repeat;
position: relative;
}
img {
position: absolute;
transition: all 50ms;
}
下图是JS的代码
var img = document.querySelector("#img");
// 注册鼠标移动事件
document.onmousemove = function (e) {
img.style.top = `${e.pageY}px`;
img.style.left = `${e.pageX}px`;
}
当我鼠标在哪里我自己设置的图片就跑到哪里