标签：
jquery在当前页面查看原图，单击图片，显示出大图片，再次单击图片，恢复网页原有状态。不刷新页面的情况下查看原图，在网上类似的应用有很多。有时候朋友们说这是无刷新放大图片的功能，其实也就那么一回事吧，不过从本款代码来看，这功能实现起来并不太复杂，引入了jQuery，代码分享给大家。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jQuery实现的点击图片放大且在当前页面查看原图丨北京kiddy官网|河北pvc塑料地板</title> <style type="text/css"> div, ul, li { margin: 0px; padding: 0px; list-style-type: none; } #Over { position: absolute; width: 100%; z-index: 100; left: 0px; top: 0px; } .img { width:90%; background-color: #FFF; height: 90%; padding: 3px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; } .content { text-align: center; width: 200px; height:150px; margin-right: auto; margin-left: auto; } .EnlargePhoto { cursor: pointer; } .TempContainer { position: absolute; z-index: 101; margin-right: 0px; margin-left: 0px; text-align: center; width: 100%; cursor: pointer; } </style> </head> <script type="text/javascript" src="/images/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { var ImgsTObj = $(‘.EnlargePhoto‘);//class=EnlargePhoto的都是需要放大的图像 if(ImgsTObj){ $.each(ImgsTObj,function(){ $(this).click(function(){ var currImg = $(this); CoverLayer(1); var TempContainer = $(‘<div class=TempContainer></div>‘); with(TempContainer){ appendTo("body"); css(‘top‘,currImg.offset().top); html(‘<img border=0 src=‘ + currImg.attr(‘src‘) + ‘>‘); } TempContainer.click(function(){ $(this).remove(); CoverLayer(0); }); }); }); } else{ return false; } //====== 使用/禁用蒙层效果 ======== function CoverLayer(tag){ with($(‘#Over‘)){ if(tag==1){ css(‘height‘,$(document).height()); css(‘display‘,‘block‘); css(‘opacity‘,0.9); css("background-color","#000"); } else{ css(‘display‘,‘none‘); } } } }); </script> <body> <div class="content"> <IMG class="img EnlargePhoto" src="/images/m03.jpg"><br /><br /> <IMG class="img EnlargePhoto" src="/images/m04.jpg"><br /><br /> </div> </body> </html> <br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js" target=_blank>jquery-1.6.2.min.js</a><br><hr>
标签：
原文地址：http://www.cnblogs.com/youtianxia/p/4414122.html
