前言
用html+css+JavaScript实现了一个图片鼠标跟随效果
一、思路
- 鼠标不断的移动，使鼠标移动事件：mousemove；
- 在页面中移动，给document注册事件；
- 图片要移动距离，而且不占位置，我们可以使用绝对定位；
- 核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x轴和y轴坐标作为图片的top和left值就可以移动图片。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
img {
position: absolute;
top: 2px;
max-width: 100px;
height: auto;
cursor: none;
}
</style>
</head>
<body>
<img src="../images/curry2.png" alt="" />
</body>
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
var x = e.pageX;
var y = e.pageY;
pic.style.left = x - 50 + 'px';
pic.style.top = y - 50 + 'px';
});
</script>
</html>
代码解析：
当鼠标在页面上移动时，通过监听document的mousemove事件，获取鼠标的坐标pageX和pageY，并将图片的位置设置为鼠标坐标减去50像素（因为我这个图片设置的是100*100，减去50就会使鼠标居中）。通过这样的方式，就可以实现图片跟随鼠标移动的效果。需要注意的是，这段代码前提是页面上存在一个img元素，代码中使用document.querySelector方法获取该元素。
效果
上面这个curry就变成我的鼠标啦！！！！！
