jQuery 图片放大查看是一种常见的网页交互功能,允许用户点击图片后,以更大的尺寸查看图片的详细内容。这种功能通常用于图片库、产品展示页等场景,提升用户体验。
以下是一个简单的 jQuery 图片放大查看的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 图片放大查看</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
display: block;
margin: auto;
width: 80%;
max-width: 700px;
max-height: 100%;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<img id="myImg" src="image.jpg" alt="图片描述" width="300" height="200">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<script>
$(document).ready(function(){
$("#myImg").click(function(){
$("#myModal").css("display", "block");
$("#img01").attr("src", this.src);
});
$(".close").click(function(){
$("#myModal").css("display", "none");
});
});
</script>
</body>
</html>
通过以上方法,可以有效地实现和优化 jQuery 图片放大查看功能。
领取专属 10元无门槛券
手把手带您无忧上云