jquery 实现图片放大

宇文麒麟

于 2023-06-26 15:29:07 发布

阅读量493

点赞数

文章标签： javascript 开发语言 ecmascript

原文链接：https://blog.csdn.net/xiaojin21cen/article/details/104928433

版权

这段代码展示了一个简单的HTML和jQuery实现，当鼠标悬停在小图片上时，图片会放大1.4倍。点击图片后，会在屏幕中央以弹出层形式显示全尺寸图像，点击弹出层可关闭。利用了CSS定位和过渡效果来实现平滑的动画。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<title>enlarge-img</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<style>
#enlarge-div {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    width: 100%;
    height: 100%;
    display: none;
}
 
#enlarge-div:hover {
    cursor: zoom-out;
}
 
#enlarge-div #inner-div {
    width: 80%;
    height: 85%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
 
#enlarge-div #inner-div #big-img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}


.enlarge-img {  
	cursor: zoom-in;  
	transition: all 0.6s;  
}

.enlarge-img:hover {  
	transform: scale(1.4);  
}

</style>
</head>
<body>

	<h1>jquery 图片放大</h1>

	<img class="enlarge-img" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb"    style="height:80px; max-width:80px;">
	<img class="enlarge-img" src="https://images.pexels.com/photos/620337/pexels-photo-620337.jpeg?auto=compress&cs=tinysrgb"    style="height:80px; max-width:80px;">
	<img class="enlarge-img" src="https://images.pexels.com/photos/2088167/pexels-photo-2088167.jpeg?auto=compress&cs=tinysrgb"  style="height:80px; max-width:80px;">
	<img class="enlarge-img" src="https://images.pexels.com/photos/1658967/pexels-photo-1658967.jpeg?auto=compress&cs=tinysrgb"  style="height:80px; max-width:80px;" >
	 
	<div id="enlarge-div">
		<div id="inner-div">
			<img id="big-img" src=""/>
		</div>
	</div>



<script type="text/javascript">

$(function () {
	$(".enlarge-img").click(function () {
		$("#big-img").attr("src", $(this).attr("src"));//设置#big-img元素的src属性

		$("#enlarge-div").fadeIn("fast");//显示弹出层

		$("#enlarge-div").click(function () {//关闭弹出层
			$(this).fadeOut("fast");
		});
	});
});
</script>
</body>
</html>

很简单的放大观看