Jquery图片预览插件 示例源码

【实例简介】

通过jQuery和js做成的单张图片大图预览插件,页面上不需要额外代码，引入js文件，即可用

【实例截图】

【核心代码】

$(document).ready(function () {
    //添加遮罩层
    var hideDiv = "<div id='mask' class='mask'>";
    $("body").append(hideDiv);
    var divH = document.getElementById("mask");
    divH.style.cssText = "text-align:center; display:inline-block; vertical-align:middle;z-index:99999;position: absolute;top: 0px;filter: alpha(opacity=60);background-color: #777;left: 0px;opacity: 0.99;filter: Alpha(opacity=99);-moz-opacity: 0.99;";
    //给遮罩层加样式

    $("img").click(function () { imgclick(this) });
    //点击隐藏遮罩层
    $(".mask").on("click", function () {
        $(this).fadeToggle();
    });
})
function imgclick(jqImg) {
    //var img = document.getElementById(imgid);
    var img = jqImg;
    var maskheight;
    var imgH = img.naturalHeight;
    if (imgH == undefined) {//IE8以下不兼容naturalHeight，需要针对处理
        var image = new Image();
        image.src = img.src;
        imgH = image.height;
    }
    if (imgH > $(document).height()) {//设置遮罩层高度
        maskheight = imgH 40;
    } else {
        maskheight = $(document).height() 40;
    }
    $("#mask").css("height", maskheight);
    $("#mask").css("width", $(document).width());
    document.getElementById("mask").innerHTML = '<img src="' img.src '" style="margin-top:20px"/>'
    $("#mask").fadeIn();
    
    //$("mask").on("click", function (e) {
    //    e.stopPropagation();
    //})
}