博客

jsp中点击图片在弹出层显示大图

  • Post author:
  • Post category:其他



点击图片在弹出层显示大图


使用jquery，




实现点击图片在弹出层显示大图，再次点击关闭，加入图片高宽和窗口高宽的大小判断。

效果图如下：






3.


[代码]

[CSS]代码



跳至


[3]


[4]


[5]



[全屏预览]



view source


print


?


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


>

02

03
<


ul


id


=


"imglist"


>

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


>

14
</


ul


>

15
<


script


>

16


$(function(){

17


$(".pimg").click(function(){

18


var _this = $(this);//将当前的pimg元素作为_this传入函数

19


imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);

20


});

21


});

22
</


script


>


5.


[代码]

功能实现函数


view source


print


?


01
function


imgShow(outerdiv, innerdiv, bigimg, _this){

02


var


src = _this.attr(


"src"


);


//获取当前点击的pimg元素中的src属性

03


$(bigimg).attr(


"src"


, src);


//设置#bigimg元素的src属性

04

05


/*获取当前点击图片的真实大小，并显示弹出层及大图*/

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;

12


var


scale = 0.8;


//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

13

14


if


(realHeight>windowH*scale) {



//判断图片高度

15


imgHeight = windowH*scale;


//如大于窗口高度，图片高度进行缩放

16


imgWidth = imgHeight/realHeight*realWidth;


//等比例缩放宽度

17


if


(imgWidth>windowW*scale) {



//如宽度扔大于窗口宽度

18


imgWidth = windowW*scale;


//再对宽度进行缩放

19


}

20


}


else


if


(realWidth>windowW*scale) {



//如图片高度合适，判断图片宽度

21


imgWidth = windowW*scale;


//如大于窗口宽度，图片宽度进行缩放

22


imgHeight = imgWidth/realWidth*realHeight;


//等比例缩放高度

23


}


else


{



//如果图片真实高度和宽度都符合要求，高宽不变

24


imgWidth = realWidth;

25


imgHeight = realHeight;

26


}

27


$(bigimg).css(


"width"


,imgWidth);


//以最终的宽度对图片缩放

28

29


var


w = (windowW-imgWidth)/2;


//计算图片与窗口左边距

30


var


h = (windowH-imgHeight)/2;


//计算图片与窗口上边距

31


$(innerdiv).css({



"top"


:h,


"left"


:w});


//设置#innerdiv的top和left属性

32


$(outerdiv).fadeIn(


"fast"


);


//淡入显示#outerdiv及.pimg

33


});

34

35


$(outerdiv).click(


function


(){



//再次点击淡出消失弹出层

36


$(


this


).fadeOut(


"fast"


);

37


});

38
}

转载地址： http://www.oschina.net/code/snippet_1176814_24342