实现一个放大镜效果

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

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

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

1 利用jQuery实现

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

/* 缩略图父标签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: 摘取部分代码，主要是缩略图和高清大图的标签

<!-- 商品图区 -->        <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和鼠标移动事件

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

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

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

  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的位置

1.4.2 event.pageX和event.pageY

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

1.4.3 width和height

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