JS 图片跟随鼠标移动案例

Posted 2021-03-02 徐许

css代码

1  img {
2             position: absolute;
3             /* top: 2px; */
4             width: 50px;
5             height: 50px;
6         }

html代码

 <img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt="">

js代码

 1     <script>
 2         var pic = document.querySelector(‘img‘)
 3         document.addEventListener(‘mousemove‘, function (e) {
 4             var x = e.pageX;
 5             var y = e.pageY;
 6             // 一定要给left和top添加px单位
 7             pic.style.left = x + ‘px‘;
 8             pic.style.top = y + ‘px‘;
 9 
10         })
11     </script>