实现效果
案例分析
1.鼠标不断的移动，使用鼠标移动事件：mousemove
2.在页面中移动，给document注册事件
3.图片要移动距离，而且不占据位置，我们使用绝对定位即可
4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片
代码部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天使跟随鼠标移动</title> <style> img { position: absolute; } </style> </head> <body> <img src="../imgs/angel.gif" alt=""> <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-40+'px'; }) </script> </body> </html>
1234567891011121314151617181920212223242526图片素材部分
百度网盘链接
链接：https://pan.baidu.com/s/1loik5kB2qZS4lGB3pSwWdg?pwd=dhtw
提取码：dhtw
