查看大图功能代码jquery版

/*查看大图*/ 
var screenheight = $(window).height(); 
var screenwidth = $(window).width(); 
var loadCSS = function(){ 
var screenwidth = $(window).width(); 
var screenheight = $(window).height(); 
$("div.lookBigPicture").css({"left":screenwidth*0.2,"top":screenheight*0.15+$(document).scrollTop(), 
"width":screenwidth*0.6,"height":screenheight*0.7}); 
$("img.bigImg").css({"max-width":(screenwidth*0.6 - 30),"max-height":screenheight*0.7-40}); 
$("img.bigImg").load(function(){ 
$("img.bigImg").css("top",(screenheight*0.7 - 30 - $("img.bigImg").height())*0.5 + 30); 
}); 
$("img.bigImg").css("top",(screenheight*0.7 - 30 - $("img.bigImg").height())*0.5 + 30); 
$.log("$(document).height():"+$(document).height()); 
}; 
$("a#bigPic").click(function(){ 
$.log("screenheight:"+screenheight+"screenwidth:"+screenwidth); 
str = $("img[img-size]").attr("src"); 
$("body").append("<div class='grey'></div>");//灰色底层 
$("body").append("<div class='lookBigPicture'><span class='protoPic'><a z-index='20001' target='_blank' href='"+str+"'>查看原图</a></span><a href='javascript:;' class='bigpicclose' title='关闭'>×</a><img class='bigImg' src='"+str+"'/></div>"); 
$("div.grey").css( "height",$(document).height()); 
loadCSS(); 
$("body").css({overflow:"hidden"}); //禁用滚动条 
}); 
$("body").delegate("div.grey,a.bigpicclose","click",function(){ 
$("body").css({overflow:"visible"}); //恢复滚动条 
$("div.lookBigPicture").remove(); 
$("div.grey").remove(); 
}); 
//当浏览器窗口大小改变时 
$(window).resize(function () { 
loadCSS(); 
});

/***遮罩层****/ 
.grey { 
background: #000; 
display: block; 
z-index: 1000; 
width: 100%; 
position: absolute; 
filter: alpha(opacity : 50); 
opacity: 0.5; 
top: 0; 
left: 0; 
top: 0; 
} .lookBigPicture { 
border: #000 solid 1px; 
position: absolute; 
z-index: 2000; 
text-align: center; 
background: black; 
} 
.bigImg { 
margin-left: auto; 
margin-right: auto; 
position: relative; 
} 
.bigpicclose { 
position: absolute; 
width: 36px; 
height: 36px; 
font-size: 0; 
z-index: 20001; 
top: -18px; 
right: -18px; 
background: 
url("http://img.t.sinajs.cn/t5/style/images/layer/multipic_ico.png?id=20131018174500") 
0 0 no-repeat; 
} 
.lookbigicn { 
display: inline-block; 
width: 12px; 
height: 12px; 
background: 
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816") 
-175px -25px no-repeat; 
vertical-align: -2px; 
margin-left: 20px; 
} 
.W_ico12 { 
display: inline-block; 
width: 12px; 
height: 12px; 
background: 
url("http://img.t.sinajs.cn/t5/style/images/common/icon.png?id=1383027536816") 
-175px 0px no-repeat; 
vertical-align: -2px; 
} 
.protoPic { 
position: absolute; 
display: inline-block; 
height: 30px; 
top: 10px; 
right: 50px; 
overflow: hidden; 
cursor: pointer; 
color: #F8F8F8; 
text-shadow: 0 1px 0 rgba(0, 0, 0, .5); 
}

<p pic-choice style="display: none;"> 
<em class="W_ico12"></em><a href="javascript:;" id="hidePic">收起</a> 
<em class="lookbigicn"></em><a href="javascript:;" id="bigPic">查看大图</a> 
</p>