Question

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

我的代码使用两个图像：

<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

Answer 1

问题是您在 mousemove 上唯一设置的 width：'200％'，如果再次单击而不移动鼠标，它将保持剩余的 width：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。

希望有帮助。

缩放时定位图像错误

1 个答案: