仿淘宝商品详情页左上部分。图片鼠标浮上去,图片部分区域被放大
展位图可以垂直居中于父容器,限宽不限高
展位图上面跟随鼠标移动的图层,尺寸为200x200
右侧弹出的放大图,尺寸必须为麻点图层的2倍
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(window).mousemove(function(event){ var thisImg = $("#imgBooth"); var imgW = thisImg.width(); var imgH = thisImg.height(); var x = event.clientX - thisImg.offset().left; var y = event.clientY - thisImg.offset().top; if(x<0 || y<0){$(".imagezoom").hide();return false;} if( x>imgW || y > imgH){$(".imagezoom").hide();return false;} //计算 .imagezoom 放大区域(尺寸是200x200),相对于父元素的偏移 var left=0; var top=0; if(x<=100){ left=0; }else if(x>=(imgW-100)){ left=imgW-200; }else{ left=x-100; } if(y<=100){ top=0; }else if(y>=(imgH-100)){ top=imgH-200; }else{ top=y-100; } $(".imagezoom").show(); $(".imagezoom").css("left",left+"px"); $(".imagezoom").css("top",top+"px"); /*在右面显示大图(大图必须是原图的2倍)。*/ //定容器位置 var _src = thisImg.attr("data-bigimg-src");//可以在原图中保存大图地址。 var left1 = thisImg.offset().left + imgW + 20;//20是和浮层的间距 var top1 = thisImg.offset().top; $(".img-pop").show(); $(".img-pop").css("left",left1+"px"); $(".img-pop").css("top",top1+"px"); //根据鼠标相对于原图#imgBooth的偏移,计算放大图的偏移。 var left2 = -1 * left * 2; var top2 = -1 * top * 2; $(".img-pop > img").attr("src",_src); $(".img-pop > img").css("left",left2+"px"); $(".img-pop > img").css("top",top2+"px"); }); $(".img-box").mouseleave(function(event){ $(".img-pop").hide(); }); }); </script> <style type="text/css"> /*按缩放比为2倍计算*/ .box{position:relative;width:400px;height:400px;background:#f7f7f7;overflow: hidden;margin-bottom: 15px;z-index: 1;display:table-cell;vertical-align:middle;text-align:center;overflow:hidden;} .img-box {display:inline-block;position:relative;width:400px;} .imagezoom {position:absolute;width:200px;height:200px;display:none;background:url(https://gtms01.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);cursor:move;z-index:3;font-size:0;} .img-pop{display:none;position:absolute;z-index:99;width:400px;height:400px;overflow:hidden;}/*弹出图的宽高为跟随鼠标覆层的2倍宽高*/ .img-pop img{position:absolute;} </style> 此图是400x300,放大后是800x600。 弹出层.img-pop 的显示区域是400x400,图片上跟随鼠标浮动的层.imagezoom 是200x200 容器.box可以让里面图片垂直居中 <div class="box"> <a href="#" rel="nofollow" target="_blank" class="img-box"> <img id="imgBooth" src="https://gd1.alicdn.com/bao/uploaded/i1/TB1pMbVJpXXXXceXXXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg_.webp" data-bigimg-src="https://gd1.alicdn.com/bao/uploaded/i1/TB1pMbVJpXXXXceXXXXXXXXXXXX_!!0-item_pic.jpg"> <span class="imagezoom"></span> </a> </div> <div class="img-pop"><img src=""></div> <!-- 下面的图是400x400,放大后是800x800 <div class="box"> <a href="#" rel="nofollow" target="_blank" class="img-box"> <img id="imgBooth" src="https://gd1.alicdn.com/bao/uploaded/i1/TB1elrSJFXXXXaoXpXXXXXXXXXX_!!0-item_pic.jpg_400x400.jpg_.webp" data-bigimg-src="https://gd1.alicdn.com/bao/uploaded/i1/TB1elrSJFXXXXaoXpXXXXXXXXXX_!!0-item_pic.jpg"> <span class="imagezoom"></span> </a> </div> <div class="img-pop"><img src=""></div> -->
...