使用jQuery实现图片放大镜效果
在淘宝上购物时，经常可以看到图片放大镜效果，如下图所示：
下面给出上述效果的jQuery实现代码，一切尽在代码注释中：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片放大镜</title><style>body,ul,li {padding: 0;margin: 0;list-style: none;}/* 缩略图和原图宽高一样 */.thumbnail,.origin {width: 400px;height: 400px;border: 1px solid red;position: absolute;}.origin {left: 410px; /* 原图在缩略图的右边 */top: 0;overflow: hidden; /* 隐藏溢出内容 */display: none;}/* 放大镜框 *//* 这里按2.5倍放大，400px/160px=2.5 */.magnifier {width: 160px;height: 160px;background: rgba(254, 238, 167, .4); /* 半透明效果 */position: absolute;left: 0;top: 0;display: none;}</style></head><body><!-- “缩略图”窗口 --><div class="thumbnail"><img src="images/beauty.jpg" width="400"><!-- “放大镜”框 --><div class="magnifier"></div></div><!-- “原图”窗口 --><div class="origin"><img src="images/beauty.jpg" style="position: absolute;" width="1000"></div><script src="/jquery-1.12.4.min.js"></script><script>/*放大镜实现原理：1. “缩略图”窗口与“原图”窗口中放置的是同一个图片，但“缩略图”窗口中的图片被缩小为400px，而“原图”窗口中的图片保持原始大小，溢出部分设为隐藏2. 先确定缩放比例，我们假定原图大小为1000px，缩略图大小为400px，缩放比例为2.53. 首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）4. 其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动5. 鼠标向右移动，“原图”窗口中的图片向左移动，它们的方向是相反的！这是实现原理中的关键环节6. “放大镜”框的大小不是随意设定的，它与放大倍数有关，如果要放大2.5倍，则“原图”窗口的大小也应该是“放大镜”框的大小的2.5倍*/// 当鼠标进入“缩略图”窗口时，显示“原图”窗口和“放大镜”框$('.thumbnail').mouseover(function (e) {$('.origin').css('display', 'block');$('.magnifier').css('display', 'block');})// 当鼠标在“缩略图”窗口中移动时$('.thumbnail').mousemove(function (e) {// 一、首先实现“放大镜”框跟随鼠标移动的功能（我们让鼠标处于“放大镜”框的中心）// 获取鼠标当前位置var pageX = e.pageX;var pageY = e.pageY;// 获取“缩略图”窗口在整个文档中的偏移位置var offsetX = $('.thumbnail').offset().left;var offsetY = $('.thumbnail').offset().top;// 计算鼠标在缩略图中的相对位置var relativeX = pageX - offsetX;var relativeY = pageY - offsetY;// 考虑到鼠标处于“放大镜”框的中心，我们要根据鼠标位置计算“放大镜”框的位置var magOffsetX = $('.magnifier').width() / 2;var magOffsetY = $('.magnifier').height() / 2;$('.magnifier').css({ left: relativeX - magOffsetX + 'px',top: relativeY - magOffsetY + 'px' });// 获取“放大镜”框的新位置，后面会用到var magX = $('.magnifier').position().left;var magY = $('.magnifier').position().top;// 二、处理越界情况// 确定边界var maxMagX = $('.thumbnail').width() - $('.magnifier').width()var maxMagY = $('.thumbnail').height() - $('.magnifier').height()// 左边界if (magX <= 0) { $('.magnifier').css('left', '0px'); }// 右边界if (magX >= maxMagX) { $('.magnifier').css('left', maxMagX + 'px'); }// 上边界if (magY <= 0) { $('.magnifier').css('top', '0px'); }// 下边界if (magY >= maxMagY) { $('.magnifier').css('top', maxMagY + 'px'); }// 三、其次实现“原图”窗口中的图片随“放大镜”框的移动而相应移动// 按照之前确定的缩放比例移动“原图”窗口中的图片// 注意：图片的移动方向与鼠标的移动方向是相反的！var originX = magX * 2.5;var originY = magY * 2.5;$('.origin img').css({ left: -originX + 'px', top: -originY + 'px' });})// 当鼠标离开“缩略图”窗口时，隐藏“原图”窗口和“放大镜”框$('.thumbnail').mouseout(function () {$('.origin').css('display', 'none');$('.magnifier').css('display', 'none');})</script></body></html>
