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);
//內容頁圖片點擊放大效果函數主體開始
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
jQuery點擊圖片放大顯示原圖效果