Maison >interface Web >js tutoriel >HTML, CSS et jQuery : créez un bel affichage d'album photo
HTML, CSS et jQuery : créez un bel affichage d'album photo
- 王林original
- 2023-10-24 08:39:231309parcourir
HTML, CSS et jQuery : créez un bel affichage d'album photo
Les albums photo sont un moyen populaire d'afficher et de partager des photos. À l’ère d’Internet, nous pouvons créer un bel affichage d’album photo via des pages Web. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un superbe affichage d'album photo et fournit des exemples de code spécifiques.
- Structure HTML
Tout d'abord, nous devons créer la structure de base du HTML. Vous trouverez ci-dessous un modèle HTML simple pour créer une page d'album photo.
<!DOCTYPE html>
<html>
<head>
<title>相册展示</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="gallery">
<div class="photo">
<img src="photo1.jpg" alt="照片1">
</div>
<div class="photo">
<img src="photo2.jpg" alt="照片2">
</div>
<div class="photo">
<img src="photo3.jpg" alt="照片3">
</div>
<!-- 在此添加更多照片 -->
</div>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>Dans cet exemple, nous plaçons la photo dans un élément div et utilisons l'élément img pour afficher la photo. Nous avons ajouté un élément div appelé gallery pour contenir toutes les photos. div元素中，并使用img元素来显示照片。我们添加了一个名为gallery的div元素，以容纳所有的照片。
- CSS样式
为了让相册看起来更加漂亮，我们需要为其添加一些CSS样式。创建一个名为styles.css的文件，并将以下CSS代码添加到文件中。
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.photo {
width: 200px;
margin: 10px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.photo img {
width: 100%;
height: auto;
transition: transform 0.2s;
}
.photo:hover img {
transform: scale(1.1);
}在这个例子中，我们使用了Flexbox布局来实现相册的排列。我们定义了一个名为gallery的CSS类，将其展示为一个弹性容器，同时在容器中居中对齐所有的照片。
每个照片都被添加了名为photo的CSS类。我们设置了照片的宽度、外边距和阴影效果。overflow: hidden是为了防止照片溢出容器。我们还使用了CSS过渡效果，使照片在悬停时产生一个放大的动画效果。
- jQuery效果
要为相册添加一些交互效果，我们可以使用jQuery库。首先，下载并引入jQuery库(jquery.js)。
接下来，创建一个名为script.js的文件，将以下代码添加到文件中。
$(document).ready(function() {
$('.photo').click(function() {
$(this).toggleClass('active');
});
});这段代码会在文档加载完毕后执行。当点击照片时，它会切换名为active
- Styles CSS
- Pour rendre l'album photo plus beau, nous devons y ajouter des styles CSS. Créez un fichier appelé
styles.csset ajoutez le code CSS suivant au fichier.
Dans cet exemple, nous utilisons la disposition Flexbox pour organiser l'album. Nous définissons une classe CSS appelée gallery, l'affichons comme un conteneur flexible et alignons au centre toutes les photos du conteneur.
- Chaque photo est ajoutée avec une classe CSS nommée
- Pour ajouter des effets interactifs à l'album photo, nous pouvons utiliser la bibliothèque jQuery. Tout d'abord, téléchargez et importez la bibliothèque jQuery (
jquery.js). - Ensuite, créez un fichier appelé
script.jset ajoutez le code suivant au fichier. rrreee - Ce code sera exécuté une fois le document chargé. Lorsque l'on clique sur la photo, la classe CSS nommée
activeest modifiée. Nous pouvons utiliser cette classe CSS pour ajouter un style supplémentaire à la photo afin d'indiquer qu'elle est active.
photo. Nous définissons la largeur, les marges et les effets d'ombre de la photo. overflow : caché sert à empêcher les photos de déborder du conteneur. Nous avons également utilisé un effet de transition CSS pour animer l'agrandissement de la photo au survol. Parfait et agrandissez
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!