在一些电商网站的商品详情页面，都会有放大镜效果，实现起来并不是很困难，今天用了两个小时，写了一个放大镜效果的实例，来分享给大家！
实现的效果大概是这个样子的
预览
先来看一下效果吧，点击下面的链接预览动态的效果！
http://sandbox.runjs.cn/show/vbu6ebq2
代码实现过程：
1. html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>商品详情放大镜效果</title> <script type="text/javascript" src="js/jquery/jquery-3.2.1.js"></script> </head> <body> <div class="container"> <h2>商品详情放大镜效果</h2> <div class="magnifierContainer"> <div class="imgLeft"> <!-- 中号图片 --> <div class="imgMedium" id="imgMedium"> <!-- 放大镜 --> <div class="magnifier" id="magnifier"> <img src="http://product.dangdang.com/images/zoom_pup.png"> </div> <!-- 图片 --> <div class="mediumContainer" id="mediumContainer"> <img src="http://img3m3.ddimg.cn/2/21/22628333-1_w_2.jpg"> </div> <div id="zhezhao"></div> </div> <!-- 缩略图 --> <ul class="img_x" id="img_x"> <li><img src="http://img3m3.ddimg.cn/2/21/22628333-1_x_2.jpg"></li> <li><img src="http://img3m3.ddimg.cn/2/21/22628333-2_x_2.jpg"></li> <li><img src="http://img3m3.ddimg.cn/2/21/22628333-3_x_2.jpg"></li> <li><img src="http://img3m3.ddimg.cn/2/21/22628333-4_x_2.jpg"></li> <li><img src="http://img3m3.ddimg.cn/2/21/22628333-5_x_2.jpg"></li> </ul> </div> <div class="imgRight"> <!-- 大图 --> <div class="img_u" id="img_u"> <img src="http://img3m3.ddimg.cn/2/21/22628333-1_u_2.jpg"> </div> </div> </div> </div> </body> </html>
2. css部分
<style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .container { width: 850px; margin: 50px auto; text-align: center; } .magnifierContainer { display: flex; margin-top: 30px; } .imgMedium { position: relative; } .imgLeft .magnifier { position: absolute; display: none; width: 200px; height: 200px; } .mediumContainer { width: 350px; height: 350px; border: 1px solid #eee; overflow: hidden; } #zhezhao { width: 350px; height: 350px; background: transparent; position: absolute; top: 0; border: 1px solid transparent; } #zhezhao:hover { cursor: move; } .img_x { width: 350px; height: 77px; border: 1px solid #eee; margin-top: 20px; display: flex; } .img_x li{ width: 54px; height: 54px; border: 2px solid transparent; margin: 8px 4px; padding: 2px; } .img_u { width: 500px; height: 450px; border: 1px solid #eee; float: left; margin-left: 15px; overflow: hidden; display: none; } </style>
3. js部分
<script type="text/javascript"> $('#img_x li').eq(0).css('border', '2px solid coral'); $('#zhezhao').mousemove(function(e){ $('#img_u').show(); $('#magnifier').show(); var left = e.offsetX - parseInt($('#magnifier').width()) / 2; var top = e.offsetY - parseInt($('#magnifier').height()) / 2; left = left < 0 ? 0 : left; left = left > (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) ? (parseInt($('#zhezhao').outerWidth()) - parseInt($('#magnifier').outerWidth())) : left; top = top < 0 ? 0 : top; top = top > (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) ? (parseInt($('#zhezhao').outerHeight()) - parseInt($('#magnifier').outerHeight())) : top; $('#magnifier').css('left', left + 'px'); $('#magnifier').css('top', top + 'px'); var leftRate = left / parseInt($('#zhezhao').outerWidth()); var bigLeft = leftRate * parseInt($('#img_u img').outerWidth()); $('#img_u img').css('margin-left', -bigLeft + 'px'); var topRate = top / parseInt($('#zhezhao').outerHeight()); var bigTop = topRate * parseInt($('#img_u img').outerHeight()); $('#img_u img').css('margin-top', -bigTop + 'px'); }) $('#zhezhao').mouseleave(function(){ $('#img_u').hide(); $('#magnifier').hide(); }) $('#img_x li').mouseover(function(){ $(this).css('border', '2px solid coral').siblings().css('border', '2px solid transparent'); $('#mediumContainer img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_w_2.jpg'); $('#img_u img').eq(0).attr('src', 'http://img3m3.ddimg.cn/2/21/22628333-' + ($(this).index()+1) + '_u_2.jpg'); }) </script>
实现过程中需要注意的地方：
在实现放大镜在图片上移动时，我给商品图片绑定了mousemove鼠标移动事件，当鼠标移动的同时，也移动放大镜，但是效果却不是想象的样子，会有一些卡顿、闪烁的现象
当鼠标在商品图片上移动时，放大镜也随之移动，当鼠标在放大镜图片上时，则不会移动，这是因为绑定mousemove事件的是商品图片，而不是放大镜图片，而放大镜图片所在的图层在商品图片之上，所以当鼠标移动到放大镜图片上时，就不会触发mousemove事件，从而就出现了卡顿的现象。
那么，怎样解决呢？
我又加了一个div，这个div的大小和商品图片的div的大小一样，背景色为透明色，图层在最上面，然后给这个透明的div绑定mousemove事件，放大镜图片就会流畅的移动了。
在线调试
如需在线调试请点击下面的链接！
如果对您有帮助，记得点赞哦！需要您的支持与鼓励，同时也欢迎您留下宝贵意见！