<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片折叠展开效果</title>
<style>
.container {
width: 300px;
margin: 20px auto;
text-align: center;
}
.img-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.img-container img {
width: 100%;
height: auto;
transition: transform 0.5s ease;
}
.img-container img.expanded {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="container">
<div class="img-container">
<img src="path_to_image.jpg" alt="Sample Image" class="collapse">
</div>
<button class="collapse-btn">折叠/展开图片</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.collapse-btn').click(function() {
var $img = $('.img-container img');
$img.toggleClass('expanded');
});
});
</script>
</body>
</html>
这段代码实现了一个简单的图片折叠展开效果。用户点击按钮时,相应的图片会在折叠和展开状态之间切换。通过jQuery的.toggleClass()
方法,我们可以轻松地在两个CSS类之间切换,从而实现图片的放大缩小效果。