jQuery点击图片放大显示原图效果
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
