javascript - 缩放时定位图像错误

我对网站上的图像具有自定义缩放功能。与该功能有关，我似乎无法解决一个小错误。

我的代码使用两个图像：

<div id="img-anchor-1" class="thumb-show active_zoom">
  <img id="product_img"
  src="http://s7d9.scene7.com/is/image/AmericanApparel/ah3260ws_deeppeacock?
  defaultImage=/notavail&amp;$ProductZoom$">

  <img class="zoom"
  src="http://s7d9.scene7.com/is/image/AmericanApparel/ah3260ws_deeppeacock?
  defaultImage=/notavail&amp;$ProductZoom$" style="width: 100%; opacity: 0;
  left: 0px; top: 0px;">

</div>

然后使用CSS / jQuery处理单击图像时的缩放。

var src = $('.thumb-show').find('img').attr("src");
$('.thumb-show').append('<img class="zoom hidden" src="'+src+'" >');
var zoomed_in = false;

$(document.body).on('click', '.thumb-show' ,function(){
  if(zoomed_in == false)
  {
    $(this).addClass("active_zoom");
    $(this).children(".zoom").removeClass("hidden");
    zoomed_in = true;
    $(this).mousemove(function(event){
      var offset = $(this).offset();
      var left = event.pageX - offset.left;
      var top = event.pageY - offset.top;

      $(this).find('.zoom').css({
        width: '200%',
        opacity: 1,
        left: -left,
        top: -top
      })
    });
  }
  else if(zoomed_in == true){
    var offset = $(this).offset();
    var left = event.pageX - offset.left;
    var top = event.pageY - offset.top;
    $(this).removeClass("active_zoom");
    $(this).children(".zoom").addClass("hidden");
    zoomed_in = false;
    $(this).find('.zoom').css({
      width: '100%',
      opacity: 1,
      left: -left,
      top: -top
    })
  }
});

$('.thumb-show').mouseleave(function(){
   $(this).find('.zoom').css({
     width: '100%',
     opacity: 0,
     left: 0,
     top: 0
   })
 });

除了一个错误，所有这些都可以正常工作。

当用户单击要缩放的图像（不移动鼠标），单击以取消缩放（再次不移动鼠标），然后再次单击缩放时，第二个（缩放的）图像显示在容器的左侧。

我尝试调整CSS和jQuery，但无法解决此问题。

如果有人有任何建议，将不胜感激。

这是CodePen中的一个工作示例：
https://codepen.io/EricBellDesigns/pen/PXaZLg

最佳答案

问题是您唯一的设置宽度：鼠标移动时为'200％'，如果您再次单击而不移动鼠标，则其剩余宽度为100％；因为鼠标永远不会移动。这将解决您的问题，

 if(zoomed_in == false)
  {
    $(this).addClass("active_zoom");
    $(this).children(".zoom").removeClass("hidden");
    zoomed_in = true;

    $(this).find('.zoom').css({
        width: '200%',
        opacity: 1,
    })

    $(this).mousemove(function(event){
      var offset = $(this).offset();
      var left = event.pageX - offset.left;
      var top = event.pageY - offset.top;
      $(this).find('.zoom').css({
        width: '200%',
        opacity: 1,
        left: -left,
        top: -top
      })
    });

  }

工作pen。

希望能帮助到你。