创建带缩略图的照片库是一个常见的Web开发任务。在本攻略中，我们将使用jQuery和一些CSS来创建一个简单的照片库，其中包含缩略图和全尺寸图像。我们将提供两个示例，演示如何使用jQuery创建带缩略图的照片库。
示例1：使用jQuery和CSS创建照片库
下面是一个示例，演示如何使用jQuery和CSS创建照片库：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Photo Gallery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#gallery {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
width: 200px;
height: 200px;
margin: 10px;
overflow: hidden;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.full-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
}
.full-image img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
</style>
</head>
<body>
<div id="gallery">
<div class="thumbnail">
<img src="https://picsum.photos/id/237/200/200" data-full="https://picsum.photos/id/237/1200/800">
</div>
<div class="thumbnail">
<img src="https://picsum.photos/id/238/200/200" data-full="https://picsum.photos/id/238/1200/800">
</div>
<div class="thumbnail">
<img src="https://picsum.photos/id/239/200/200" data-full="https://picsum.photos/id/239/1200/800">
</div>
</div>
<div class="full-image">
<img src="">
</div>
<script>
$(document).ready(function() {
$(".thumbnail").click(function() {
var fullImage = $(this).find("img").attr("data-full");
$(".full-image img").attr("src", fullImage);
$(".full-image").fadeIn();
});
$(".full-image").click(function() {
$(this).fadeOut();
});
});
</script>
</body>
</html>
在这个示例中，我们有一个<div>元素，它具有id属性为gallery，其中包含三个缩略图。每个缩略图都是一个<div>元素，它具有class属性为thumbnail。缩略图包含一个<img>元素，它具有data-full属性，该属性包含全尺寸图像的URL。我们使用CSS来设置缩略图和全尺寸图像的样式。缩略图具有固定的宽度和高度，并使用overflow: hidden来隐藏图像的溢出部分。全尺寸图像使用position: fixed来覆盖整个屏幕，并使用半透明的黑色背景来增加对比度。我们使用jQuery来绑定单击事件处理程序，以便在单击缩略图时显示全尺寸图像。当单击缩略图时，我们使用attr函数获取data-full属性的值，并将其设置为全尺寸图像的src属性。然后，我们使用fadeIn函数显示全尺寸图像。当单击全尺寸图像时，我们使用fadeOut函数将其隐藏。
示例2：使用jQuery和AJAX从服务器加载图像
下面是一个示例，演示如何使用jQuery和AJAX从服务器加载图像：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Photo Gallery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#gallery {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
width: 200px;
height: 200px;
margin: 10px;
overflow: hidden;
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.full-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
}
.full-image img {
max-width: 90%;
max-height: 90%;
object-fit: contain;
}
</style>
</head>
<body>
<div id="gallery"></div>
<div class="full-image">
<img src="">
</div>
<script>
$(document).ready(function() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/photos",
success: function(data) {
for (var i = 0; i < 10; i++) {
var thumbnailUrl = data[i].thumbnailUrl;
var fullUrl = data[i].url;
var thumbnail = $("<div>").addClass("thumbnail");
var img = $("<img>").attr("src", thumbnailUrl).attr("data-full", fullUrl);
thumbnail.append(img);
$("#gallery").append(thumbnail);
}
}
});
$(".thumbnail").click(function() {
var fullImage = $(this).find("img").attr("data-full");
$(".full-image img").attr("src", fullImage);
$(".full-image").fadeIn();
});
$(".full-image").click(function() {
$(this).fadeOut();
});
});
</script>
</body>
</html>
在这个示例中，我们使用$.ajax函数从服务器加载图像。我们使用url选项指定要加载的URL，并使用success回调函数处理响应数据。在回调函数中，我们使用一个循环来遍历前10个图像，并为每个图像创建一个缩略图。我们使用$("
")![]()
")
和$("函数创建新的
和>元素，并使用addClass、attr和append函数设置它们的属性和内容。然后，我们将缩略图添加到#gallery`元素中。当单击缩略图时，我们使用与示例1相同的代码来显示全尺寸图像。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用jQuery创建带缩略图的照片库 - Python技术站
赞 (0)
微信扫一扫 
支付宝扫一扫
解释jQuery中向服务器发送请求的常见方法
上一篇
2023年5月9日
如何使用jQuery在HTML中操作CSS类
下一篇
2023年5月9日
