天使&图标跟随鼠标移动

最新推荐文章于 2023-09-08 09:01:59 发布

原创最新推荐文章于 2023-09-08 09:01:59 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

这篇博客探讨了如何使用JavaScript实现鼠标移动时图片跟随的效果。通过监听鼠标移动事件，动态设置图片的left和top样式属性，使得图片位置随鼠标坐标改变，创建了一种有趣的交互体验。代码示例中，图片位于一个固定大小的盒子内，并在body和html元素全屏情况下保持在鼠标下方。

var img1 = document.querySelector('img')
  console.log(img1);
    document.addEventListener('mousemove',e =>{
      img1.style.left = e.pageX + 'px'
      img1.style.top = e.pageY + 'px'
    })

  <div class="box">
        <img class="img1" src="./img1/p1.jpg" alt="">
      </div>

  .box{
    width: 50px;
    height: 200px;
  }
  body,html{
    width: 100%;
    height: 100%;
  }
  .img1{
    width: 50px;
    height: 50px;
    position: fixed;
    left: 2px;
    top: 2px;
  }