图片放大

<!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>
posted @ 2014-12-08 17:17  我是谁呢  阅读(147)  评论(0)    收藏  举报