HTML, CSS, and jQuery: Build a beautiful photo album display-JS Tutorial-php.cn

HTML, CSS, and jQuery: Build a beautiful photo album display

王林

Release： 2023-10-24 08:39:23

Original

1318 people have browsed it

HTML, CSS, and jQuery: Build a beautiful photo album display

Photo albums are a popular way to display and share photos. In the Internet age, we can create a beautiful photo album display through web pages. This article will introduce how to use HTML, CSS and jQuery to build a stunning photo album display, and provide specific code examples.

HTML Structure

First, we need to create the basic structure of HTML. Below is a simple HTML template for building a photo album page.

<!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>

Copy after login

In this example, we put the photo in a div element and use the img element to display the photo. We added a div element called gallery to hold all the photos.

CSS Style

In order to make the photo album look more beautiful, we need to add some CSS styles to it. Create a file called styles.css and add the following CSS code to the file.

.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);
}

Copy after login

In this example, we use Flexbox layout to arrange the album. We define a CSS class named gallery, display it as a flexible container, and center-align all photos in the container.

Each photo is added with a CSS class named photo. We set the width, margins, and shadow effects of the photo. overflow: hidden is to prevent photos from overflowing the container. We also used a CSS transition effect to animate the photo's enlargement on hover.

jQuery Effect

To add some interactive effects to the photo album, we can use the jQuery library. First, download and introduce the jQuery library (jquery.js).

Next, create a file called script.js and add the following code to the file.

$(document).ready(function() {
  $('.photo').click(function() {
    $(this).toggleClass('active');
  });
});

Copy after login

This code will be executed after the document is loaded. When the photo is clicked, it switches the CSS class named active. We can use this CSS class to add some additional styling to the photo to indicate that it is active.

Improvement and expansion

The above are the steps to create a basic photo album display, you can expand and improve it as needed. Here are some suggestions for optional improvements and feature extensions:

Add thumbnails of photos and display larger images when the thumbnail is clicked.
Achieve transition effects to enable smooth switching between photos.
Use CSS animations to provide a smoother user experience.
Add titles and descriptions to photos.
Add categories or tags so that users can view photos according to different categories or tags.

Summary:
This article introduces how to use HTML, CSS and jQuery to build a beautiful photo album display. Through this example, we demonstrate the creation of HTML structure, the addition of CSS styles, and the implementation of jQuery interactive effects. I hope this article was helpful in building your photo album presentation and gave you some suggestions for further expansion and improvement.

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful photo album display. For more information, please follow other related articles on the PHP Chinese website!