HTML section:
<div id= "Append_parent" ></div>
JS Code section:
?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546 |
//内容页图片点击放大效果
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
"> " 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 Styles section:
?
123456789101112 |
/* 图片放大弹出层 */
.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
;}
|
Effect:
Effects Demo page: http://www.ipsfan.com/koutu/2011-10-02/77.html
Http://rt.ipsfan.com/blog-6-41.html
jquery Click on the image to enlarge the original effect