html:點擊圖片放大到全屏居中，再次點擊縮回

 JavaScript代碼：

function coverLayer(tag) {
        with ($('.over')) {
            if (tag == 1) {
                css('height', $(document).height());
                css('display', 'block');
                css('opacity', 1);
                
                css("background", "rgba(220,220,220,0.5)");
            }
            else {
                css('display', 'none');
            }
        }
    }
    function OpenTu(src) {
        //var currImg = $('.amplifyImg img');
        coverLayer(1);
        var tempContainer = $('<div class=tempContainer></div>');//圖片容器
       
        with (tempContainer) {//width方法等同於$(this)
            appendTo("body"); 
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            //獲取圖片原始寬度、高度
            var orignImg = new Image();
            //orignImg.src = currImg.attr("src");
            orignImg.src =src;
           
            orignImg.onload = function() {
             
                var currImgWidth = orignImg.width;
                var currImgHeight = orignImg.height;
                if (currImgWidth < windowWidth) {//爲了讓圖片不失真，當圖片寬度較小的時候，保留原圖
                    if (currImgHeight < windowHeight) {
                        var topHeight = (windowHeight - currImgHeight) / 2;
                        if (topHeight > 35) { 
                            topHeight = topHeight - 35;
                            css('top', topHeight);
                        } else {
                            css('top', 0);
                        }
                        //html('<img border=0 src=' + currImg.attr('src') + '>');
                        html('<img border=0 src=' + src + '>');
                    } else {
                        css('top', 0);
                        //html('<img border=0 src=' + currImg.attr('src') + ' height=' + windowHeight + '>');
                        html('<img border=0 src=' + src + ' height=' + windowHeight + '>');
                    }
                } else {
                    var currImgChangeHeight = (currImgHeight * windowWidth) / currImgWidth;
                    if (currImgChangeHeight < windowHeight) {
                        var topHeight = (windowHeight - currImgChangeHeight) / 2;
                        if (topHeight > 35) {
                            topHeight = topHeight - 35;
                            css('top', topHeight);
                        } else {
                            css('top', 0);
                        }
                        //html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + ';>');
                        html('<img border=0 src=' + src + ' width=' + windowWidth + ';>');
                    } else {
                        css('top', 0);
                        //html('<img border=0 src=' + currImg.attr('src') + ' width=' + windowWidth + '; height=' + windowHeight + '>');
                        html('<img border=0 src=' + src + ' width=' + windowWidth + '; height=' + windowHeight + '>');
                    }
                }
            }
           
        }
        $(".over").click(function () {
            $('.tempContainer').remove();
            coverLayer(0);
        });
        tempContainer.click(function () {
            $('.tempContainer').remove();
            coverLayer(0);
        });
    }

 html代碼：

 <div class="over"></div><!--背景層-->
        <div class="logoImg amplifyImg">
            <!--注意：此處的amlifyImg不可少-->
            @*<img id="img_1" src="~/data/res/03/12321.jpg" />*@
        </div>

 css代碼

      .over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}

開始加載圖片的時候遇到了一點問題。

讀取不到圖片的width,height，每次第一次加載寬高都是0，後來一番功夫才發現在onload之後再去獲取就能直接得到