点击出大图

标签：style   http   io   ar   os   sp   java   on   div   

<! 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 >

点击出大图

标签：style   http   io   ar   os   sp   java   on   div   

原文地址：http://my.oschina.net/vieky/blog/352155