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