图片放大镜全局生效问题：需仅对指定class图片触发

问题根源 #

你的代码中，最后调用放大镜方法时使用了全局<img>选择器：

magnify.magnifyImg('img', magnification, magnifierSize);

这个选择器会匹配页面上所有图片元素，导致放大镜功能对所有图片生效。

修改方案 #

只需要将调用时的选择器替换为目标类选择器.magnifiedImg，同时可以在方法内增加类校验（可选，提升代码严谨性）：

1. 修改调用语句

将最后一行的选择器从'img'改为'.magnifiedImg'：

magnify.magnifyImg('.magnifiedImg', magnification, magnifierSize);

2. 可选：增加类校验（提升代码严谨性）

在magnifyImg方法中，判断选中元素是否包含magnifiedImg类，避免误绑定：

if(!($pointer.is('img') && $pointer.hasClass('magnifiedImg'))){
  alert('Object must be an image with magnifiedImg class.');
  return false;
}

修改后的完整代码 #

<img class="magnifiedImg" src="" />
<style>
.magnify{
  border-radius: 50%;
  border: 2px solid black;
  position: absolute;
  z-index: 20;
  background-repeat: no-repeat;
  background-color: white;
  box-shadow: inset 0 0 20px rgba(0,0,0,.5);
  display: none;
  cursor: none;
}
</style>
<script>
/*Size is set in pixels... supports being written as: '250px' */
var magnifierSize = 250;

/*How many times magnification of image on page.*/
var magnification = 4;

function magnifier() {

  this.magnifyImg = function(ptr, magnification, magnifierSize) {
    var $pointer;
    if (typeof ptr == "string") {
      $pointer = $(ptr);
    } else if (typeof ptr == "object") {
      $pointer = ptr;
    }
    
    // 增加类校验，确保是带magnifiedImg类的图片
    if(!($pointer.is('img') && $pointer.hasClass('magnifiedImg'))){
      alert('Object must be an image with magnifiedImg class.');
      return false;
    }

    magnification = +(magnification);

    $pointer.hover(function() {
      $(this).css('cursor', 'none');
      $('.magnify').show();
      //Setting some variables for later use
      var width = $(this).width();
      var height = $(this).height();
      var src = $(this).attr('src');
      var imagePos = $(this).offset();
      var image = $(this);

      if (magnifierSize == undefined) {
        magnifierSize = '150px';
      }

      $('.magnify').css({
        'background-size': width * magnification + 'px ' + height * magnification + "px",
        'background-image': 'url("' + src + '")',
        'width': magnifierSize,
        'height': magnifierSize
      });

      //Setting a few more...
      var magnifyOffset = +($('.magnify').width() / 2);
      var rightSide = +(imagePos.left + $(this).width());
      var bottomSide = +(imagePos.top + $(this).height());

      $(document).mousemove(function(e) {
        if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
          $('.magnify').hide();
          $(document).unbind('mousemove');
        }
        var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
        $('.magnify').css({
          'left': e.pageX - magnifyOffset,
          'top': e.pageY - magnifyOffset,
          'background-position': backgroundPos
        });
      });
    }, function() {

    });
  };

  this.init = function() {
    $('body').prepend('<div class="magnify"></div>');
  }

  return this.init();
}

var magnify = new magnifier();
// 修改选择器为.magnifiedImg
magnify.magnifyImg('.magnifiedImg', magnification, magnifierSize);
</script>

效果说明 #

修改后，只有带有magnifiedImg类的图片才会触发放大镜效果，其他图片不受影响。

内容的提问来源于stack exchange，提问作者TBC