Jquery实现点击图片后居中放大

最新推荐文章于 2023-01-10 09:36:51 发布

Curry 3O

最新推荐文章于 2023-01-10 09:36:51 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/qq_42552393/article/details/98481424

jQuery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用Jquery实现的图片点击后居中放大的方法，通过在页面上添加一个固定位置的图层，使图片在点击后能够放大显示在页面中央，同时背景会进行虚化处理，提供更好的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中，点击图片后图片在页面居中放大，并且背景虚化。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jquery实现图片点击后居中放大</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.drawing{
			width: 150px;
			margin: 10px;
		}
		.drawing:hover{
			cursor: zoom-in;
		}
		.wrapper{
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 999;
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-position: center;
			background-color: rgba(52, 52, 52, 0.8);
			background-size: 50%;
		}
		.wrapper:hover{
			cursor: zoom-out;
		}
	</style>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script>
		$(function(){
			$('.drawing').click(function(){
				//查看大图
				$(this).after("<div class='wrapper'></div>");
				var imgSrc = $(this).attr('src');
				$(".wrapper").css("background-image", "url(" + imgSrc + ")");
				$('.wrapper').fadeIn(1000);
				//关闭并移除图层
				$('.wrapper').click(function(){
					$('.wrapper').fadeOut(1000).remove();
				});
			});
		});
	</script>
</head>
<body>
	<div class="container">
		<img class="drawing" src="./images/2.jpg" title="点击查看大图" />
	    <img class="drawing" src="./images/3.jpg" title="点击查看大图" />
	    <img class="drawing" src="./images/5.jpg" title="点击查看大图" />
	</div>
</body>
</html>

在这里插入图片描述