html点击缩略图放大jQuery实现放年夜镜后果

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

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

/ 缩略图父标签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可以移动高清图。

<!-- 商品图区 --> <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()。