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

转载于:https://www.cnblogs.com/hedianzhan/p/8459283.html