Click on the image pops up a floating layer images to enlarge

HTML

<!-- 承载大图片的div -->
<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>
</div>

<div>
　　<img src="1.jpg" onclick="showbigpiic(this)"/></a>

</div>

 

---

 

JS

function showbigpic (obj) {
     var _this = $ (obj); // the current pimg element as a function of incoming _this 
    imgShow ( "# outerdiv", "#innerdiv", "#bigimg" , _this); 
} 

function imgShow (outerdiv, innerdiv, bigimg, _this) {
     var src = _this.attr ( "src"); // Get pimg src attribute element in the current click 
    $ (bigimg) .attr ( "src", src); // setting the src attribute #bigimg element 
/ * get the real size of the current clickable image, and displays pop-up layer and enlarge * / 
    $ ( "<img />"). attr ( "src", src) .load ( function () {
         var windowW = $ (window) .width ();// get the current window width var windowH = $ (window) .height (); 
        
        // get the current window height 
        var realWidth = the this .width; // get the real picture width 
        var realHeight = the this .height; // get the true picture height 
        var imgWidth, imgHeight;
         var Scale = 0.9; // scaling size, when the true picture be greater than the width and height of the window width and height scaling 
IF (realHeight> windowH * scale) { // Analyzing image height 
            imgHeight = windowH * scale; // such as larger than the window height, the height image zoom 
            imgWidth = imgHeight / realHeight * realWidth; // scaling width IF (imgWidth> windowW * scale) { // The throw is greater than the width of the window width 
                imgWidth = windowW * scale; //        
        
            Further scaling width 
            } 
        } the else  IF (realWidth> windowW * Scale) { // The suitable height of the image, the image width determines 
            imgWidth = windowW * Scale; // such as larger than the window width, the width of the image to zoom 
                        imgHeight = imgWidth / realWidth * realHeight; // scaling the height of 
        } the else { // If the real image height and width to meet the requirements, the aspect unchanged 
            imgWidth = realWidth; 
            imgHeight = realHeight; 
        } 
                $ (bigimg) .css ( "width", imgWidth); // final width of the image scaling 
var W = (windowW-imgWidth) / 2; // calculated from the image and the left window
         var        
        h = (windowH-imgHeight) / 2; // calculate the margin image window 
        $ (innerdiv) .css ({ "top": H, "left": W}); // Set top and left attributes #innerdiv 
        $ (outerdiv) .fadeIn ( "the FAST"); // fade display #outerdiv and .pimg 
    }); 
    
    $ (outerdiv) .click ( function () { // click again to fade disappear popup to 
        $ ( the this ) .fadeOut ( "FAST" ); 
    }); 
}

 

---

Original link: https: //blog.csdn.net/Frog_Demon/article/details/86630755