js 图片 图层放大

jsp 

infoImg =>图片url  点击事件 bigshow(url)

 <td><img id="t_inforImg"class="pic" οnclick="bigshow(inforImg);" src="'inforImg'" width="50px" height="50px" alt=""></td>

 jsp:

rgba(0.0.0.0) 颜色 外层div 内层div img

<div id="outerdiv"                                                                                                                                                                                            style="position: fixed; background: rgba(0, 0, 0, 0); z-index: 2; width: 100%; height: 100%; display: none;">
        <div id="innerdiv"  style="position: absolute; height: 300px; width: 300px; margin-top: -300px; margin-left: 300px;">
             <img id="bigimg" style="border: 5px solid #fff; height: 300px; width: 300px;" src="" />
          </div>
</div>

 js:

bigshow(url)

 function bigshow(url) {
    imgShow("#outerdiv", "#innerdiv", "#bigimg", url)
}
function imgShow(outerdiv, innerdiv, bigimg, url){  
    var src = url;// 获取当前点击的pimg元素中的src属性
    $(bigimg).attr("src", src);// 设置#bigimg元素的src属性
    $("<img/>").attr("src", src).load(function(){  
        $(bigimg).css("width",300);// 以最终的宽度对图片缩放
        $(bigimg).css("height",300);// 以最终的宽度对图片缩放
        $(outerdiv).fadeIn("fast");// 淡入显示#outerdiv
    });  
      
    $(outerdiv).click(function(){// 再次点击淡出消失弹出层
        $(this).fadeOut("fast");  
    });  
}