<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.close{ width:30px; height:30px; background:url(images/close_3.png) no-repeat 0 0; position:fixed; top:5px; right:30px; _position:absolute; _top:expression(documentElement.scrollTop+5+"px"); cursor:pointer;}
.close:hover{ background:url(images/close_3.png) no-repeat -30px 0;}
</style>
<script type="text/javascript" charset="utf-8" src="js/jquery2.1.1.min.js"></script>
<script type="text/javascript">
function imgShow(_this){
var src = _this.attr("src");
$("#bigimg").attr("src", src);
$("<img/>").attr("src", src).load(function(){
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight;
var scale = 0.8;
if(realHeight>windowH*scale) {
imgHeight = windowH*scale;
imgWidth = imgHeight/realHeight*realWidth;
if(imgWidth>windowW*scale) {
imgWidth = windowW*scale;
}
} else if(realWidth>windowW*scale) {
imgWidth = windowW*scale;
imgHeight = imgWidth/realWidth*realHeight;
} else {
imgWidth = realWidth;
imgHeight = realHeight;
}
$("#bigimg").css("width",imgWidth);
var w = (windowW-imgWidth)/2;
var h = (windowH-imgHeight)/2;
$("#innerdiv").css({"top":h, "left":w});
$("#outerdiv").fadeIn("fast");
});
}
</script>
</head>
<body>
<img src="images/n_2a.jpg" width="100px" height="100px" onclick="imgShow($(this))"/>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:999;width:100%;height:100%;display:none;">
<a class="close" onclick="$(‘#outerdiv‘).fadeOut(‘fast‘);"></a>
<div id="innerdiv" style="position:absolute;"><img id="bigimg" style="border:5px solid #fff;" src="" /></div>
</div>
</body>
</html>