图片放大

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

转载于:https://www.cnblogs.com/chchao/p/4151535.html