js图片放大特效

这是我在自己的项目中写的，发出来供新手参考一下
首先思路解析：
1.在页面中固定一个居中的隐藏的div，内部包含一个img元素
2.在页面加载时，动态给所有需要的img外层包上一层带点击事件的a元素，a元素中包含该img的src.
3.当点击图片时，触发a元素的点击事件
4.在点击事件中动态将a元素的src赋值给隐藏的div中的img，并显示这个div
5.点击图片触发放大后的img的点击事件，在此 隐藏父层div
ps:页面需要引入jquery

页面中需要加：

<%--图片放大显示层  start   最好放在页面头部，底部文件中，做到所有页面生效--%>
<div id="showImg" style="text-align:center;  display:none;  z-index:999;  width:100%;height: 100%;background-color: rgb(77, 77, 77,0.8);position: fixed; top: 0px;left: 0px;right: 0px; bottom: 0px;margin: auto;" >
	
	<div style="width: 80%;height:80%;text-align: center;position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;">
		<a href="javascript:void(0);">
			<img id="showImg_img" width="80%" height="80%" src="" alt="" style="margin:0 auto;">
		</a>
	</div>

</div>

js

/**此段js必须写在 页面一加载就执行的方法中，如$(document).ready(function() {});中						*/
/**给正文中的图片加 点击放大特效  JS   start|    post-002是你想要给图片放大特效的元素的id，其所有子元素都会有效果  */
					$('#post-002 img').each(function() {
					    if ($(this).parent().hasClass('fancybox')) return;
					    if ($(this).hasClass('nofancybox')) return;
					    var alt = this.alt;
					    $(this).wrap('<a href="javascript:void(0);" data-src="' + ($(this).attr('data-src') == null ? this.src : $(this).attr('data-src')) + '" title="' + alt + '" class="fancybox"></a>');
					  });
					$(".fancybox").click(function(){
						var url = $(this).attr('data-src');
						$("#showImg_img").attr("src",url);
						$("#showImg").show();
						
					});
					$("#showImg_img").click(function(){
						$("#showImg_img").attr("src","");
						$("#showImg").hide();
					});
/**给正文中的图片加 点击放大特效  JS   end*/