点击图片在弹出层显示大图
使用jquery,
实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断。
效果图如下:
1 | * { margin : 0 ; padding : 0 ;} |
2 | #imglist { list-style : none ; width : 500px ; margin : 50px auto ;} |
3 | #imglist li { float : left ; margin-top : 10px ;} |
4. [代码]在html中使用
01 | < div id = "outerdiv" style = "position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;" >< div id = "innerdiv" style = "position:absolute;" >< img id = "bigimg" style = "border:5px solid #fff;" src = "" /></ div ></ div > |
04 | < li >< img class = "pimg" src = "img/1.jpg" width = "500px" /></ li > |
05 | < li >< img class = "pimg" src = "img/2.jpg" width = "500px" /></ li > |
06 | < li >< img class = "pimg" src = "img/3.jpg" width = "500px" /></ li > |
07 | < li >< img class = "pimg" src = "img/4.jpg" width = "500px" /></ li > |
08 | < li >< img class = "pimg" src = "img/5.jpg" width = "500px" /></ li > |
09 | < li >< img class = "pimg" src = "img/6.jpg" width = "500px" /></ li > |
10 | < li >< img class = "pimg" src = "img/7.jpg" width = "500px" /></ li > |
11 | < li >< img class = "pimg" src = "img/8.jpg" width = "500px" /></ li > |
12 | < li >< img class = "pimg" src = "img/9.jpg" width = "500px" /></ li > |
13 | < li >< img class = "pimg" src = "img/10.jpg" width = "500px" /></ li > |
17 | $(".pimg").click(function(){ |
18 | var _this = $(this);//将当前的pimg元素作为_this传入函数 |
19 | imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); |
5. [代码]功能实现函数
01 | function imgShow(outerdiv, innerdiv, bigimg, _this){ |
02 | var src = _this.attr( "src" ); |
03 | $(bigimg).attr( "src" , src); |
06 | $( "<img/>" ).attr( "src" , src).load( function (){ |
07 | var windowW = $(window).width(); |
08 | var windowH = $(window).height(); |
09 | var realWidth = this .width; |
10 | var realHeight = this .height; |
11 | var imgWidth, imgHeight; |
14 | if (realHeight>windowH*scale) { |
15 | imgHeight = windowH*scale; |
16 | imgWidth = imgHeight/realHeight*realWidth; |
17 | if (imgWidth>windowW*scale) { |
18 | imgWidth = windowW*scale; |
20 | } else if (realWidth>windowW*scale) { |
21 | imgWidth = windowW*scale; |
22 | imgHeight = imgWidth/realWidth*realHeight; |
25 | imgHeight = realHeight; |
27 | $(bigimg).css( "width" ,imgWidth); |
29 | var w = (windowW-imgWidth)/2; |
30 | var h = (windowH-imgHeight)/2; |
31 | $(innerdiv).css({ "top" :h, "left" :w}); |
32 | $(outerdiv).fadeIn( "fast" ); |
35 | $(outerdiv).click( function (){ |
36 | $( this ).fadeOut( "fast" ); |
转载地址: http://www.oschina.net/code/snippet_1176814_24342