jquery放大镜

jQuery放大镜实现方法

jQuery放大镜效果通常用于电商网站展示商品细节，通过鼠标悬停或移动触发局部放大。以下是两种常见实现方式：

使用jQuery插件（如jQZoom）

1. 引入jQuery和jQZoom库

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jqzoom@2.3.1/dist/jqzoom.min.js"></script>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqzoom@2.3.1/dist/jqzoom.css">

2. HTML结构

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

3. 初始化插件

   $(document).ready(function(){
   $('.zoom-image').jqzoom({
    zoomType: 'standard',
    lens: true,
    preloadImages: false,
    alwaysOn: false
   });
   });

自定义实现方案

1. HTML结构

   <div class="product-image">
   <img src="small.jpg" id="small-image">
   <div class="zoom-lens"></div>
   <div class="zoom-result"></div>
   </div>

2. CSS样式

   .product-image { position: relative; }
   .zoom-lens {
   position: absolute;
   width: 100px;
   height: 100px;
   background: rgba(255,255,255,0.3);
   border: 1px solid #ddd;
   display: none;
   }
   .zoom-result {
   position: absolute;
   left: 100%;
   width: 400px;
   height: 400px;
   overflow: hidden;
   display: none;
   border: 1px solid #ccc;
   }

3. jQuery逻辑

   
   $(document).ready(function(){
   const smallImage = $('#small-image');
   const lens = $('.zoom-lens');
   const result = $('.zoom-result');

// 计算放大比例 const ratio = 3; const lensW = lens.width(); const lensH = lens.height();

smallImage.on('mousemove', function(e){ // 显示放大镜和结果框 lens.show(); result.show();

// 计算镜头位置
let posX = e.pageX - $(this).offset().left - lensW/2;
let posY = e.pageY - $(this).offset().top - lensH/2;

// 边界限制
posX = Math.max(0, Math.min(posX, $(this).width() - lensW));
posY = Math.max(0, Math.min(posY, $(this).height() - lensH));

// 移动镜头
lens.css({ left: posX, top: posY });

// 计算放大区域
result.css('background-image', 'url(' + smallImage.attr('src') + ')');
result.css('background-size', $(this).width() * ratio + 'px ' + $(this).height() * ratio + 'px');
result.css('background-position', '-' + (posX * ratio) + 'px -' + (posY * ratio) + 'px');

});

smallImage.on('mouseleave', function(){ lens.hide(); result.hide(); }); });

---

### 注意事项

- 大图尺寸应是原图的2-3倍以获得清晰效果
- 移动端需要添加触摸事件支持
- 性能优化建议预加载大图
- 可添加过渡动画增强用户体验

以上两种方案可根据项目需求选择，插件方案更快捷，自定义方案灵活性更高。