代碼： 仿淘寶商品詳情頁左上，圖片鼠標浮上去，圖片部分區域放大 （頁面布局：圖片列表）

仿淘寶商品詳情頁左上部分。圖片鼠標浮上去，圖片部分區域被放大

展位圖可以垂直居中於父容器，限寬不限高

展位圖上面跟隨鼠標移動的圖層，尺寸為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>
-->

 

 

 

 

...