jQuery點擊圖片放大顯示原圖效果
阿新 • • 發佈：2018-02-22
value func tool pad loading app .html and 自動
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);
//內容頁圖片點擊放大效果函數主體開始
functionimgPop(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
jQuery點擊圖片放大顯示原圖效果