JS点击图片后图片放大效果

要实现左右切换效果请转至：https://blog.csdn.net/white1114579650/article/details/111980566

效果图如下

关键代码

<img style="width: 150px;height: 150px;padding: 10px;" src="img/微信图片_20201230091744.jpg" class="img-responsive">
<img style="width: 150px;height: 150px;padding: 10px;" src="img/微信图片_20201230091800.jpg" class="img-responsive">
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
    <img id="bigimg" style="border:5px solid #fff;" src="" />
</div>

 js部分

    <script src="js/jquery.min.js"></script>
    <script>
        $(function() {
        $(".img-responsive").click(function (){
            debugger
            var _this=$(this);
            imgShow("#outerdiv","#innerdiv","#bigimg",_this);
        });
    });

    function imgShow(outerdiv,innerdiv,bigimg,_this){
        debugger
        var src=_this.attr("src");
        $(bigimg).attr("src",src);
        $("<img/>").attr("src",src).on('load',function () {
            debugger
            var windowW=$(window).width()
            var windowH=$(window).height();
            var realWidth=this.width;
            var readHeight=this.height;
            var imgWidth,imgHeight;
            var scale=0.8;
            if(realWidth>windowW+scale){
                imgHeight=windowH*scale;
                imgWidth=imgHeight/readHeight*realWidth;
                if(imgWidth>windowW*scale){
                    imgWidth=windowW*scale;
                }
            }else if(realWidth>windowW*scale){
                imgWidth=windowW*scale;
                imgHeight=imgWidth/realWidth*readHeight;
            }else {
                imgWidth=realWidth;
                imgHeight=readHeight;
            }
            $(bigimg).css("width",imgWidth);
            var w=(windowW-imgWidth)/2;
            var h=(windowH-imgHeight)/2;
            $(innerdiv).css({"top":h,"left":w});
            $(outerdiv).fadeIn("fast");
        });
        $(outerdiv).click(function (){
            $(this).fadeOut("fast");
        });
    };
    </script>

 

注：必须引入js文件后才有效果！！！ 

要实现左右切换效果请转至：https://blog.csdn.net/white1114579650/article/details/111980566