js图片放大特效

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/q2158798/article/details/85537128

这是我在自己的项目中写的,发出来供新手参考一下
首先思路解析:
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*/
展开阅读全文

没有更多推荐了,返回首页