代码： 仿淘宝商品详情页左上，图片鼠标浮上去，图片部分区域放大 （页面布局：图片列表）...

代码： 仿淘宝商品详情页左上，图片鼠标浮上去，图片部分区域放大 （页面布局：图片列表）

仿淘宝商品详情页左上部分。图片鼠标浮上去，图片部分区域被放大

展位图可以垂直居中于父容器，限宽不限高

展位图上面跟随鼠标移动的图层，尺寸为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>

 

 

 

 

...

posted on 2015-10-31 23:20 bjhhh 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qq21270/p/4926484.html