HTML部分:
<div id="append_parent"></div>
JS代码部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
//内容页图片点击放大效果
var
imgBoxMod=$(
".ctnlist .text img"
);
imgPop(imgBoxMod);
//内容页图片点击放大效果函数主体开始
function
imgPop(imgBoxMod){
imgBoxMod.each(
function
(){
//超过最大尺寸时自动缩放内容页图片尺寸
var
ctnImgWidth=$(
this
).width();
if
(ctnImgWidth>618){
$(
this
).width(618);
}
//点击图片弹出层放大图片效果
$(
this
).click(
function
(){
$(
"#append_parent"
).html(
"<div id="
imgzoom
"><div id="
imgzoom_zoomlayer
" class="
zoominner
"><p><span class="
y
"><a title="
在新窗口打开
" target="
_blank
" class="
imglink
" id="
imgzoom_imglink
" href="
">在新窗口打开</a><a title="
关闭
" class="
imgclose
">关闭</a></span></p><div id="
imgzoom_img
" class="
hm
"><img src="
" id="
imgzoom_zoom
" style="
cursor:pointer
"></div></div></div><div id="
imgzoom_cover
"></div>"
);
//生成HTML代码
var
domHeight =$(document).height();
//文档区域高度
$(
"#imgzoom_cover"
).css({
"display"
:
"block"
,
"height"
:domHeight});
var
imgLink=$(
this
).attr(
"src"
);
$(
"#imgzoom_img #imgzoom_zoom"
).attr(
"src"
,imgLink);
$(
"#imgzoom"
).css(
"display"
,
"block"
);
imgboxPlace();
})
})
//关闭按钮
$(
"#append_parent .imgclose"
).live(
'click'
,
function
(){
$(
"#imgzoom"
).css(
"display"
,
"none"
);
$(
"#imgzoom_cover"
).css(
"display"
,
"none"
);
})
//新窗口打开图片
$(
"#imgzoom_imglink"
).live(
'click'
,
function
(){
var
imgLink=$(
"#imgzoom_zoom"
).attr(
"src"
);
$(
"#imgzoom_imglink"
).attr(
"href"
,imgLink);
})
//弹出窗口位置
function
imgboxPlace(){
var
cwinwidth=$(
"#imgzoom"
).width();
var
cwinheight=$(
"#imgzoom"
).height();
var
browserwidth =$(window).width();
//窗口可视区域宽度
var
browserheight =$(window).height();
//窗口可视区域高度
var
scrollLeft=$(window).scrollLeft();
//滚动条的当前左边界值
var
scrollTop=$(window).scrollTop();
//滚动条的当前上边界值
var
imgload_left=scrollLeft+(browserwidth-cwinwidth)/2;
var
imgload_top=scrollTop+(browserheight-cwinheight)/2;
$(
"#imgzoom"
).css({
"left"
:imgload_left,
"top"
:imgload_top});
}
}
//内容页图片点击放大效果函数主体结束
|
CSS样式部分:
1
2
3
4
5
6
7
8
9
10
11
12
|
/* 图片放大弹出层 */
.zoominner {
background
:
none
repeat
scroll
0
0
#FFFFFF
;
padding
:
5px
10px
10px
;
text-align
:
left
;}
.zoominner p {
height
:
30px
;
_position
:
absolute
;
_right
:
2px
;
_top
:
5px
;}
.zoominner p a {
background
:
url
(
"../images/imgzoom_tb.gif"
)
no-repeat
scroll
0
0
transparent
;
float
:
left
;
height
:
17px
;
line-height
:
100px
;
margin-left
:
10px
;
overflow
:
hidden
;
width
:
17px
;}
.zoominner p a.imgadjust {
background-position
:
-40px
0
;}
.zoominner p a.imgclose {
background-position
:
-80px
0
;
cursor
:
pointer
;}
.y {
float
:
right
;
margin-bottom
:
10px
;}
.ctnlist .text img{
cursor
:
pointer
;}
#imgzoom_cover{
background-color
:
#000000
; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=
70
); opacity:
0.7
;
position
:
absolute
;
z-index
:
800
;
top
:
0px
;
left
:
0px
;
width
:
100%
;
display
:
none
;}
#imgzoom{
display
:
none
;
z-index
:
801
;
position
:
absolute
;}
#imgzoom_img{
_width
:
300px
;
_height
:
200px
;
min-width
:
300px
;
min-height
:
200px
;
background
:
url
(../images/imageloading.gif)
center
center
no-repeat
;}
#imgzoom_zoomlayer{
_width
:
300px
;
_height
:
200px
;
_position
:
relative
;
_padding-top
:
30px
;
min-width
:
300px
;
min-height
:
200px
;}
|
效果:
效果演示页: http://www.ipsfan.com/koutu/2011-10-02/77.html
http://rt.ipsfan.com/blog-6-41.html