javascript - 如何在悬停时创建多个单独的放大效果

Question

有很大的放大效果如图here

$(document).ready(function() {
  var native_width = 0;
  var native_height = 0;
  
  $(".large").css("background", "url('" + $(".small").attr("src") + "') no-repeat");

  $(".magnify").mousemove(function(e) {
    if (!native_width && !native_height) {
      var image_object = new Image();
      image_object.src = $(".small").attr("src");
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      var magnify_offset = $(this).offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {

        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;

        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

* {
  margin: 0;
  padding: 0;
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
}

.small {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

我想做的是拥有多个独立的实例。我尝试制作 HTML 的副本，然后尝试调整 CSS/JS，但我无法分离放大效果，它只是复制两者的效果或根本不发生。

Answer 1

要解决此问题，您需要在每个 .magnify 实例中引用 .small 和 .large 元素，而不是在同时访问 DOM。

为此，您可以在 .magnify 元素上的 mousemove 事件中使用 $(this).find()，如下所示:

$(document).ready(function() {
  var native_width = 0;
  var native_height = 0;
  
  $(".large").css("background", function() {
    return "url('" + $(this).next(".small").attr("src") + "') no-repeat"
  });

  $(".magnify").mousemove(function(e) {
    // retrieve the related elements here:
    var $this = $(this),
      $small = $this.find('.small'),
      $large = $this.find('.large');
    
    // ... and use them in the below code block:
    if (!native_width && !native_height) {
      var image_object = new Image();
      image_object.src = $small.attr("src");
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      var magnify_offset = $this.offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      if (mx < $this.width() && my < $this.height() && mx > 0 && my > 0) {
        $large.fadeIn(100);
      } else {
        $large.fadeOut(100);
      }
      if ($large.is(":visible")) {
        var rx = Math.round(mx / $small.width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $small.height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";
        var px = mx - $large.width() / 2;
        var py = my - $large.height() / 2;

        $large.css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

* {
  margin: 0;
  padding: 0;
}

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
  cursor: none
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  display: none;
  z-index: 10; /* add this to stop the cropping of the magnifier */
}

.small {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

<div class="magnify">
  <div class="large"></div>
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200" />
</div>

另请注意，在 .large 元素的 CSS 中添加了 z-index，以在可缩放元素之间移动时停止剪切。