前言
用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就变成我的鼠标啦！！！！！
