点击图片放大效果无非就是创建一个容器,点击图片获取图片路径存放到大容器里.

 

接下来看一下效果图

 HTML结构

<img class="enlargeImg" width="200" src="img/6.png" title="点击查看大图" />
<div class="imgBox"&gt;</div>

CSS结构

.enlargeImg_wrapper {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-color: rgba(52, 52, 52, 0.8);
	background-size: 45%;
}
img:hover {
	cursor: zoom-in;
}
.enlargeImg_wrapper:hover {
	cursor: zoom-out;
}

JS结构

<script>
	enlargeImg();
	function enlargeImg() {
		$(".enlargeImg").click(function() {
		    $('.imgBox').html("<div class='enlargeImg_wrapper'></div>");
		    var imgSrc = $(this).attr('src');
		    $(".enlargeImg_wrapper").css("background-image","url(" + imgSrc + ")");
		    $('.enlargeImg_wrapper').fadeIn(200);
	    })
	    $('.imgBox').on('click','.enlargeImg_wrapper',function() {
		    $('.enlargeImg_wrapper').fadeOut(200).remove();
	    })
    }
</script>

OK结束!

原文地址:https://blog.csdn.net/weixin_52923266/article/details/128624170

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_32610.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注