jQuery实现放大镜效果

声明：作者声明此文章为原创，未经作者同意，请勿转载，若转载，务必注明本站出处，本平台保留追究侵权法律责任的权利。

全栈老韩

全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。

实现一个放大镜效果

放大镜效果往往是电商平台上出现的比较多的一种效果，用于对商品图的放大查看。

其原理是用一张适当大小的图来显示原图，但是使用一张更高清的大图来用作放大镜中看到的图。

这里简短使用2张图的标签来做演示，一个代表缩略图，一个代表高清大图。高清大图在缩略图的右侧，悬浮显示，父标签和缩略图的父标签大小一致。

1 利用jQuery实现

1.1 css:声明缩略图和高清图的样式

language 复制代码

/* 缩略图父标签class */
.bigImage {
  box-shadow: 0 0 3px rgba(0,0,0,0.15);
  position: relative;
  width: 400px;
  height: 400px;
}
/* 缩略图img标签 */
.bigImage>img {
  position: relative;

  width: 400px;
  height: auto;
  min-height: 400px;
  max-height: 500px;
  display: none;
}

/* 高清图父标签class */
.magnifier {  
  position: absolute;
  z-index: 299; 
  border: 1px solid #ccc;
  left: 420px;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.5);  
  display: none;
  overflow: hidden;
}  
/* 高清图img标签 */
.magnifier-image {  
  width: 1000px;
  height: auto;
  position: absolute;  
  left: -300px; 
  top: -300px;
}

通过position的relative和absolute属性，可以设置放大镜效果图absolute在原缩略图右侧，并且横向间隔20px。
高清图的img设置为更宽更高，超出父标签的视口。视口里面的图，通过设置left和top可以移动高清图。

1.2 html: 摘取部分代码，主要是缩略图和高清大图的标签

language 复制代码

<!-- 商品图区 -->
        <div>
          <!-- 缩略图 -->
          <div class="bigImage f-c-c">
            <img />
            <!-- 放大镜的高清图 -->
            <div class="magnifier">
              <img class="magnifier-image" alt="Magnified Image">
            </div>
          </div>
         </div>

1.3 js:使用jQuery监听标签hover和鼠标移动事件

当鼠标落在缩略图上时，显示放大镜标签：

language 复制代码

// 监听缩略图的hover
  $('.bigImage').hover(function () {
      $('.magnifier').css('display', 'block');
    }, function () {
      $('.magnifier').css('display', 'none');
    }
  );

当鼠标在缩略图上移动时，需要监听，并且改变放大镜区域中高清图的位置：

language 复制代码

  let largeImage = $('.bigImage');  
  let magnifier = $('.magnifier');  
  let magnifierImage = $('.magnifier-image');

  let magnifierWidth = magnifier.width();  
  let magnifierHeight = magnifier.height();

  let bigImageOffset = largeImage.offset();

  largeImage.on("mousemove", function( e ) {
    let posX = e.pageX + 1 - bigImageOffset.left;  
    let posY = e.pageY + 1 - bigImageOffset.top;

    let previewImgWidth = magnifierImage.width();  
    let previewImgHeight = magnifierImage.height();
    
    // 计算放大镜中显示的大图位置 
    let magnifierLeft = posX * (previewImgWidth / largeImage.width()) - magnifierWidth/2.0; 
    let magnifierTop = posY * (previewImgHeight / largeImage.height()) - magnifierHeight/2.0;

    // 确保放大镜在图片范围内  
    if (magnifierLeft < 0) {
      magnifierLeft = 0;
    }
    if (magnifierTop < 0) {
      magnifierTop = 0;
    }
    if (magnifierLeft + magnifierWidth > previewImgWidth) {
      magnifierLeft = previewImgWidth - magnifierWidth;
    }
    if (magnifierTop + magnifierHeight > previewImgHeight) {
      magnifierTop = previewImgHeight - magnifierHeight;
    }

    magnifierImage.css('left', -magnifierLeft);
    magnifierImage.css('top', -magnifierTop);
  });

获取鼠标在原缩略图中时，相对缩略图的x和y坐标，是鼠标的相对位置
通过原缩略图和高清图的宽高比例，按照比例计算出鼠标应该落在高清图的哪一个位置
我们要达到的效果是，鼠标坐标所在的点，处于放大镜标签的中间位置，并且高清大图的边缘不能显现在放大镜中
边缘条件需要做判断，确保放大镜中永远显示的都是高清大图的一部分

1.4 标签的frame等解释

1.4.1 offset

是标签相对于document的位置
jQuery的offset.png

1.4.2 event.pageX和event.pageY

是相对于document左边缘的鼠标的位置，iframe中相对于iframe的坐标：
jQuery的pageX.png

1.4.3 width和height

标签元素的宽和高。
这里截图中说的是.css("width"")返回的是带px或者其他单位的，建议是在数学计算情况下使用.width()。
jQuery的width和height.png

发布于2024-04-23 08:37:05

浏览量329·

暂无评论，快来发表第一条评论吧