jquery点击图片放大效果

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

 

接下来看一下效果图

 HTML结构

<img class="enlargeImg" width="200" src="img/6.png" title="点击查看大图" />
<div class="imgBox"></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结束!