时间戳

首页 > 解决方案 > 如何获得具有相同类名的不同项目位置？

javascript - 如何获得具有相同类名的不同项目位置？

问题描述

当 mousemove() 时，它只获取第一项的位置。现在它们都是重叠的。我该如何改进呢？

https://codepen.io/penny289/pen/JjJzYbv

$(window).mousemove(function(evt){
  $('.img-box').each(function(){
    var positionX= $(this).offset().left/100
    var positionY= $(this).offset().top/100

    $(this).css("left",positionX+evt.pageX/100+"%")
    .css("top",positionY+evt.pageY/100+"%")
  })
    
})
<div class="container">
  <div class="img-box box-1">
    <img src="https://images.unsplash.com/photo-1632012643163-c9c4fbbd9f05?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzEwNg&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-2">
    <img src="https://images.unsplash.com/photo-1632778931175-128809d8facc?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzE2MQ&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-3">
    <img src="https://images.unsplash.com/photo-1594734044877-2ebba0c14720?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzIwMg&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-4">
    <img src="https://images.unsplash.com/photo-1630231211819-a131d7538a41?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzIxNQ&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-5">
    <img src="https://images.unsplash.com/photo-1632073591482-0d69552e07df?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzI1NA&ixlib=rb-1.2.1&q=85">
  </div>
</div>

标签： javascriptjquery

解决方案

它不会仅获取第一张图像的坐标。相反，您似乎有几个问题：

  • 您正在除以 100，大概是因为您使用的是百分比，但除非您的屏幕是 100 像素宽，否则这显然是错误的。
  • .offset() 确实返回相对于文档的偏移量，但是您将项目相对于容器定位
  • 您每次都尝试动​​态获取偏移量，但如果您采用这种方法，您需要知道该偏移量的哪一部分是您上次调用此函数时的偏移量。否则，您开始累积 MouseEvent 的 x 和 y 位置并快速将整个事物移出屏幕。

您没有理由使用百分比，因此只需使用绝对像素并简化您的代码。

然后存储初始偏移量，.data(..)这样您就不必每次都减去以前的鼠标位置并跟踪它。由于您想要相对于容器的偏移量（因为您的 css 相对于容器呈现它），请从图像偏移量中减去容器偏移量。

现在，您可以通过添加鼠标 pageX/pageY 使图像随鼠标移动。

除此之外，您应该使用去抖动（在堆栈片段中不起作用），window.requestAnimationFrame因此您的 cpu 不会在尝试为鼠标移动的每个像素绘制一些东西时融化，而是仅在它准备绘制单个帧时。

$(window).mousemove(function(evt){
  //_.debounce(() => {
    window.requestAnimationFrame(() => {
      const containerOffsetX = $('.container').offset().left;
      const containerOffsetY = $('.container').offset().top;

      $('.img-box').each(function(elem, i){
        let imageOffsetX = $(this).data('offsetX');
        if (!imageOffsetX) {
          imageOffsetX = $(this).offset().left - containerOffsetX;
          $(this).data('offsetX', imageOffsetX);
        }
        let imageOffsetY = $(this).data('offsetY');
        if (!imageOffsetY) {
          imageOffsetY = $(this).offset().top - containerOffsetY;
          $(this).data('offsetY', imageOffsetY);
        }
      
        const mouseOffsetX = evt.pageX;
        const mouseOffsetY = evt.pageY;
      
        const newPositionX = imageOffsetX + mouseOffsetX;
        const newPositionY = imageOffsetY + mouseOffsetY;
  
        $(this).css("left", `${newPositionX}px`)
        .css("top", `${newPositionY}px`)
      });
    });
  //}, 10);
});
body{
  display:flex;
  align-items:center;
  justify-content:center;
}
.container{
  width:70vw;
  height:500px;
  position:relative;
}

.img-box{
  position:absolute;
}

.img-box img{
  width:300px;
  height:200px;
  /* transform:translate(-50%); */
}

.img-box.box-1{
  top:10%;
}

.img-box.box-2{
  left:20%;
  top:80%;
}

.img-box.box-3{
  top:50%;
  left:50%;
}

.img-box.box-4{
  top:10%;
  left:90%
}

.img-box.box-5{
  left:90%;
  top:70%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
  <div class="img-box box-1">
    <img src="https://images.unsplash.com/photo-1632012643163-c9c4fbbd9f05?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzEwNg&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-2">
    <img src="https://images.unsplash.com/photo-1632778931175-128809d8facc?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzE2MQ&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-3">
    <img src="https://images.unsplash.com/photo-1594734044877-2ebba0c14720?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzIwMg&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-4">
    <img src="https://images.unsplash.com/photo-1630231211819-a131d7538a41?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzIxNQ&ixlib=rb-1.2.1&q=85">
  </div>
  <div class="img-box box-5">
    <img src="https://images.unsplash.com/photo-1632073591482-0d69552e07df?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMjk4MzI1NA&ixlib=rb-1.2.1&q=85">
  </div>
</div>

推荐阅读