前端技术(5) : 图片点击放大

最新推荐文章于 2025-05-28 16:15:30 发布

原创最新推荐文章于 2025-05-28 16:15:30 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

79 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现图片点击放大效果的方法。通过为每张图片添加特定类名，并利用jQuery来监听点击事件，可以实现在点击图片时显示一个包含放大图片的弹窗。同时，该方法还考虑了不同屏幕尺寸下的适配问题。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556071039&di=28b25118ba1b2cfd6426f5283d023359&imgtype=0&src=http%3A%2F%2Fold.bz55.com%2Fuploads%2Fallimg%2F150210%2F139-150210134411-50.jpg" style="width: 243px;height:153px;cursor:pointer;" />
		<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556071035&di=4eff2c3738bbd22d5b7d886bd3fe900c&imgtype=0&src=http%3A%2F%2Fimgstore.cdn.sogou.com%2Fapp%2Fa%2F100540002%2F654340.jpg" style="width: 243px;height:153px;cursor:pointer;" />
		<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556157364&di=0076dbdea41f77febc18861c3beaff5e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F017ea2554912be0000019ae9e8a57b.jpg%401280w_1l_2o_100sh.jpg" style="width: 243px;height:153px;cursor:pointer;" />
		<img class="img-clouds" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1526556226855&di=e4e938754f4460c9388a23ae3b7ffa75&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2507365308%2C3087890272%26fm%3D214%26gp%3D0.jpg" style="width: 243px;height:153px;cursor:pointer;" />
		<div class="enlarge_box" style="cursor:pointer;">
			<img id="enlarge_box_img" alt="" name="pic" src="">
		</div>
	</body>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		//点击评论图片放大
		$('.img-clouds').click(function() {
			$('.enlarge_box').show();
			let img_src = $(this).attr('src');
			let $preview = $('#enlarge_box_img').attr('src')
			if($preview != img_src) {
				$('#enlarge_box_img').attr('src', img_src)
			}
			//获取图片大小
			let widthHtml = $('#enlarge_box_img').width();
			let heightHtml = $('#enlarge_box_img').height();
			let a_widthHtml = '-' + widthHtml / 2;
			let a_heightHtml = '-' + heightHtml / 2;
			//图片宽高比例
			let proportion = widthHtml / heightHtml;

			//获取浏览器可视区域大小
			let windowsWidth = $(window).width();
			let windowsHeight = $(window).height();
			let a_windowsWidth = windowsWidth * 0.8;
			let a_windowsHeight = windowsHeight * 0.8;
			let b_windowsWidth = '-' + a_windowsWidth / 2;
			let b_windowsHeight = "-" + a_windowsHeight / 2
			let a = "-" + proportion * a_windowsHeight / 2;

			if(widthHtml > a_windowsWidth || heightHtml > a_windowsHeight) {
				$('#enlarge_box_img').css({
					'height': a_windowsHeight + 'px',
					'position': 'fixed',
					'display': 'block',
					'left': 50 + '%',
					'margin-left': a + 'px',
					'top': 50 + '%',
					'margin-top': b_windowsHeight + 'px',
				})
			} else {
				$('#enlarge_box_img').css({
					'position': 'fixed',
					'display': 'block',
					'left': 50 + '%',
					'margin-left': a_widthHtml + 'px',
					'top': 50 + '%',
					'margin-top': a_heightHtml + 'px',
				})
			}

		});

		//点击放大后的图片隐藏
		$('.enlarge_box').click(function() {
			$('.enlarge_box').hide();
			$('#enlarge_box_img').attr('src', '')
			$('#enlarge_box_img').removeAttr("style")
		});
	</script>

</html>