方块跟着鼠标移动的案例

最新推荐文章于 2022-11-29 18:13:12 发布

卡卡西最近怎么样

最新推荐文章于 2022-11-29 18:13:12 发布

阅读量328

点赞数 11

分类专栏： JavaScript 零基础入门文章标签： css3 html javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_52212950/article/details/123260690

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 43 订阅

订阅专栏

在淘宝页面中经常会见到鼠标放上商品照片后照片会放大，并且移动鼠标，放大区域也会变化，今天我们来完成方块跟着鼠标移动的案例

为了不占用页面位置，我们给方块设置为绝对位置 position：absolute，然后利用鼠标点击获取位置的方法：e.pageX 与 e.pageY 来获取鼠标当前位置，事件不再使用 click ，而是用mouseover，只要鼠标移动距离超过1px，就会执行该事件

  var ele=document.querySelector('div');
      document.addEventListener('click',function(){  //先点击一次才会使方块显示
        ele.style.display='block';
        document.addEventListener('mouseover',function(e){  //事件为鼠标移动就触发
          var x=e.pageX;  //获取当前的x坐标
          var y=e.pageY;  //获取当前的y坐标
          ele.style.left= x-50+'px';  // x-50 使鼠标位于盒子正中心
          ele.style.top=y-50+'px';  // y-50 使鼠标位于盒子正中心
         })
      })

完整代码：

 <style>
      body{
          background-color: rgb(124, 124, 124);
      }
       div{
           position: absolute;
           width: 200px;
           height: 200px;
           background-color: rgb(229, 255, 0);
           display: none;
       }
    </style>
</head>
<body>
   <div></div>
<script>
      var ele=document.querySelector('div');
      document.addEventListener('click',function(){
        ele.style.display='block';
        document.addEventListener('mouseover',function(e){
          var x=e.pageX;
          var y=e.pageY;
          ele.style.left= x-50+'px';
          ele.style.top=y-50+'px';
         })
      })
    
</script>

卡卡西最近怎么样

关注

11
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
方块跟着鼠标移动的案例

在淘宝页面中经常会见到鼠标放上商品照片后照片会放大，并且移动鼠标，放大区域也会变化，今天我们来完成方块跟着鼠标移动的案例为了不占用页面位置，我们给方块设置为绝对位置 position：absolute，然后利用鼠标点击获取位置的方法：e.pageX 与 e.pageY 来获取鼠标当前位置，事件不再使用 click ，而是用mouseover，只要鼠标移动距离超过1px，就会执行该事件 var ele=document.querySelector('div'); document.ad
复制链接

扫一扫