码迷,mamicode.com
首页 > 移动开发 > 详细

JS 图片跟随鼠标移动案例

时间:2020-04-07 12:51:59      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:amp   class   dde   select   mouse   js代码   ges   doc   selector   

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>

 

JS 图片跟随鼠标移动案例

标签:amp   class   dde   select   mouse   js代码   ges   doc   selector   

原文地址:https://www.cnblogs.com/xf2764/p/12652349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!