js弹出层缩放图片

$(document).ready(function() {
  $("#img").click(function() {
    //获取图片地址
    var url = $(this).attr("src");
    showBigImage(url, $(this));
  });
});

function showBigImage(url, obj) {
var maxWidth = 700,
    size = getSize(url),
    offset = obj.offset(),
    img;
var start = {
    width: obj.attr("width") || parseInt(obj.css("width")),
    height: obj.attr("height") || parseInt(obj.css("height"))
};
//创建遮罩层
$("<div></div>").atrr("id", "div_img_cover").css({
    "position": "absolute",
    "top": "0",
    "left": "0",
    "z-index": 9999,
    "width": "100%",
    "height": "100%",
    "text-align": "center",
    "background-repeat": "no-repeat",
    "background-position": "center",
    "background-attachment": "fixed",
    "opacity": 0.8,
    "background": "#000"
}).appendTo('body');
img = new Image();
$(img).css(start);
if(img.attachEvent) {
    img.attachEvent("onload", imgLoaded);
} else {
    img.addEventListener("load", imgLoaded, false);
}
//去掉url的宽和高，得到原图
img.src = removeSize(url);

function imgLoaded() {
    var imgWidth = size.width * 1.5,
        imgHeight = size.height * 1.5,
        newWidth = imgWidth > maxWidth ? maxWidth : imgWidth,
        newHeight = imgHeight / imgWidth * newWidth,
        css;
    var end = {
        width: parseInt(newWidth),
        height: parseInt(newHeight)
    };
    var container = $("<div></div>").appendTo("body");
    container.css("position": "absolute");
    container.css(offset);
    container.attr("id", "container");
    container.append(img);
    css = setElementCenter("#container", 1, end);
    $(img).animate(end, 200);
    container.animate(css, 200);
    $("#div_img_conver").click(function() {
        var that = $(this);
        $(img).animate(start, 200, function() {
            that.remove();
            container.remove();
            $(this).remove();
        });
    });
    $(img).click(function() {
        $(img).animate(start, 200, function() {
            $("#div_img_conver").remove();
            container.remove();
            $(this).remove();
        });
    });
}

function setElementCenter(selector, pos, finalSize) {
    var position = $(selector).css("position") == "fixed",
        winSize = myGetWinSize(),
        elementSize = finalSize || getElementSize(selector),
        finalTop = (winSize.height - elementSize.height) / 2 + parseInt((!position ? winSize.scrollTop : 0)),
        finalLeft = (winSize.width - elementSize.width) / 2 + winSize.scrollLeft;
    var finalCss = {
        left: finalLeft,
        top: position ? fianlTop : (finalTop < winSize.scrollTop ? winSize.scrollTop : finalTop)
    };
    if(!pos) {
        $(selector).css({
            "position": position ? "fixed" : "absolute",
            "z-index": 10000
        });
        $(selector).css(finalCss);
    }
    $(selector).css({
        "z-index": 10000
    });
    return finalCss;
}

function myGetWinSize() {
    var size = {
        width: document.documentElement.clientWidth || document.body.clientWidth,
        height: document.documentElement.clientHeight || document.body.clientHeight,
        scrollTop: $(window).scrollTop(),
        scollLeft: $(window).scrollLeft()
    };
    return size;
}

function getElementSize(selector) {
    return {
        width: $(selector).width(),
        height: $(selector).height()
    }
}

function getWaitHeight() {
    var scrollHeight, offsetHeight;
    //处理 IE6
    if($.browser.msie && $.browser.version < 7) {
        scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
        offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
        if(scrollHeight < offsetHeight) {
            return $(window).height() + "px";
        } else {
            return scrollHeight + "px";
        }
    } else {
        return $(document).height() + "px";
    }
}

function getSize(url) {
    var paramArray = url.split("&"),
        i, item, param, length, size = {};
    length = paramArray.length;
    for(i = 0; i < length; i++) {
        item = $.trim(paramArray[i]);
        param = item.split("=");
        if(param.length == 2) {
            if($.trim(param[0]) == "width") {
                size.width = $.trim(param[1]);
            }
            if($.trim(param[0]) == "height") {
                size.height = $.trim(param[1]);
            }
        }
    }
    return size;
}

function removeSize(url) {
    var paramArray = url.split("&"),
        i, item, param, length, result = "";
    length = paramArray.length;
    for(i = 0; i < length; i++) {
        item = $.trim(paramArray[i]);
        param = item.split("=");
        if(param.length == 2) {
            if($.trim(param[0]) == "width" || ($.trim(param[0]) == "height") {} else {
                    result = result + item + "&";
                }
            }
            else {
                result = result + item + "&";
            }
        }
        return result;
    }
}`