查看图片大图效果

1、效果展示：

 

 

 

 

 

 

2、HTML 、添加onclick="getBigimg(this)"事件

<ul class="bus_list">

　　<li onclick="getBigimg(this)" data-url="https://cartype.image.mucang.cn/cartype-image/2021/0219/05/2c664b692b7a466a9d2669cbb8882850.jpg!1600x0">

　　　　<img src="https://cartype.image.mucang.cn/cartype-image/2021/0219/05/2c664b692b7a466a9d2669cbb8882850.jpg!1600x0">

　　</li>

</ul>

//渲染大图

<div id="outerdiv">

　　<div id="innerdiv">

　　　　<img id="bigimg" src="" / >

　　</div>

</div>

3、js代码

<script>

 function getBigimg(obj) {
        var imgSrc=$(obj).attr("data-url");
        imgShow("#outerdiv", "#innerdiv", "#bigimg", imgSrc);
    }
    function imgShow(outerdiv, innerdiv, bigimg, imgSrc) {
        $(bigimg).attr("src", imgSrc); //设置#bigimg元素的src属性
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img/>").attr("src", imgSrc).load(function() {
            var windowW = $(window).width(); //获取当前窗口宽度
            var windowH = $(window).height(); //获取当前窗口高度
            var realWidth = this.width; //获取图片真实宽度
            var realHeight = this.height; //获取图片真实高度
            var imgWidth, imgHeight;
            //获取图片真实大小，在不超过当前窗口的情况下等比放大，超出窗口则等比缩小
//            var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
//            if(realHeight > windowH * scale) { //判断图片高度
//                imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
//                imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
//                if(imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
//                    imgWidth = windowW * scale; //再对宽度进行缩放
//                }
//            } else if(realWidth > windowW * scale) { //如图片高度合适，判断图片宽度
//                imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
//                imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
//            } else { //如果图片真实高度和宽度都符合要求，高宽不变
//                imgWidth = realWidth;
//                imgHeight = realHeight;
//            }
            var defaultWidth,defaultHeight;
            defaultWidth = 980; // 默认宽度
            defaultHeight = 550; //默认高度
            imgWidth = realWidth==defaultWidth?realWidth:defaultWidth; //如果超出或者小于默认尺寸，设定默认固定值
            imgHeight = realHeight==defaultHeight?realHeight:defaultHeight; //如果超出或者小于默认尺寸，设定默认固定值

            $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放
            $(bigimg).css("height", imgHeight); //以最终的宽度对图片缩放

            var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
            var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
            $(innerdiv).css({
                "top": h,
                "left": w
            }); //设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg
        });

        $(outerdiv).click(function() { //再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }

</script>