jquery放大镜

jQuery 放大镜实现方法

方法一：基于鼠标位置的放大效果

创建HTML结构，包含小图容器和放大镜显示区域：

<div class="image-container">
  <img src="small-image.jpg" class="small-image">
  <div class="magnifier"></div>
</div>
<div class="zoom-result"></div>

CSS样式设置放大镜外观：

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}
.magnifier {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-repeat: no-repeat;
  display: none;
}
.zoom-result {
  width: 400px;
  height: 400px;
  border: 1px solid #ddd;
  margin-top: 10px;
  background-size: 800px 600px;
  display: none;
}

jQuery实现交互逻辑：

$(document).ready(function(){
  $('.image-container').mousemove(function(e){
    const smallImg = $('.small-image');
    const magnifier = $('.magnifier');
    const zoomResult = $('.zoom-result');

    // 计算鼠标相对位置
    const x = e.pageX - $(this).offset().left;
    const y = e.pageY - $(this).offset().top;

    // 限制放大镜不超出图像范围
    if(x < 50 || x > 250 || y < 50 || y > 150) {
      magnifier.hide();
      zoomResult.hide();
      return;
    }

    // 显示放大镜和放大区域
    magnifier.css({
      'left': (x - 50) + 'px',
      'top': (y - 50) + 'px',
      'display': 'block',
      'background-image': 'url(' + smallImg.attr('src') + ')',
      'background-position': (-(x * 2 - 100)) + 'px ' + (-(y * 2 - 100)) + 'px'
    });

    zoomResult.css({
      'display': 'block',
      'background-image': 'url(' + smallImg.attr('src') + ')',
      'background-position': (-(x * 2 - 200)) + 'px ' + (-(y * 2 - 200)) + 'px'
    });
  });

  $('.image-container').mouseleave(function(){
    $('.magnifier, .zoom-result').hide();
  });
});

方法二：使用jQuery插件简化实现

引入jquery.zoom插件：

<script src="https://cdn.jsdelivr.net/npm/jquery-zoom@1.7.21/jquery.zoom.min.js"></script>

简单调用方式：

$('.small-image').zoom({
  on: 'click',  // 或'mouseover'
  magnify: 2,
  duration: 200
});

高级配置选项：

$('.target-image').zoom({
  url: 'large-image.jpg',  // 指定大图路径
  touch: false,  // 禁用触摸设备支持
  callback: function(){
    console.log('放大镜已激活');
  }
});

方法三：响应式放大镜实现

适应移动设备的处理方案：

$('.responsive-image').on('touchmove', function(e){
  e.preventDefault();
  const touch = e.originalEvent.touches[0];
  const x = touch.pageX - $(this).offset().left;
  const y = touch.pageY - $(this).offset().top;

  $('.magnifier').css({
    'left': x + 'px',
    'top': y + 'px',
    'background-position': (-x * 2) + 'px ' + (-y * 2) + 'px'
  });
});

性能优化建议

使用CSS3 transform提升动画流畅度：

.magnifier {
  transform: translateZ(0);
  will-change: transform;
}

预加载大图避免延迟：

const largeImg = new Image();
largeImg.src = 'large-image.jpg';

以上方法可根据具体需求选择实现，插件方式最为简便，自定义代码灵活性更高。实际应用中建议考虑添加过渡动画和边界检测以提升用户体验。