Home >Web Front-end >JS Tutorial >HTML, CSS and jQuery: Techniques for achieving image folding and expanding effects

HTML, CSS and jQuery: Techniques for achieving image folding and expanding effects

WBOYOriginal: 2023-10-24 11:05:01840browse

HTML, CSS and jQuery: Tips for implementing image folding and expansion effects

Introduction
In web design and development, we often need to implement some dynamic special effects. Increase page appeal and interactivity. Among them, the image folding and unfolding effect is a common but interesting technique. Through this special effect, we can make the image fold or expand under the user's operation to show more content or details. This article will introduce how to use HTML, CSS and jQuery to achieve this effect, with specific code examples.

Implementation Ideas
To achieve the special effect of image folding and expansion, we need to build the page structure through HTML, set the style through CSS, and use jQuery to achieve interactive effects. The following is a simple implementation idea:

Create an HTML page structure, including a container div containing images.
Set CSS styles, including container size, background color, font size, etc.
Use jQuery to add an event listener, and when the user clicks on the container, switch the class name of the container.
Set the CSS style according to the class name of the container to achieve the folding or expanding effect of the image.

Code Example
The following is a simple code example that demonstrates how to use HTML, CSS and jQuery to achieve image folding and expansion effects.

HTML code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div id="image-container" class="collapsed">
    <img src="image.jpg" alt="折叠展开图片">
    <div class="overlay">
      <h1>这是折叠展开图片的标题</h1>
      <p>这是折叠展开图片的描述内容。</p>
    </div>
  </div>
</body>
</html>

CSS code (style.css):

#image-container {
  width: 300px;
  height: 200px;
  background-color: #f2f2f2;
  padding: 20px;
  position: relative;
  cursor: pointer;
}
#image-container.collapsed {
  height: 80px;
}
#image-container img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.overlay h1 {
  font-size: 24px;
  margin: 0;
}
.overlay p {
  font-size: 14px;
  margin: 10px 0 0;
}

jQuery code (script.js):

$(document).ready(function() {
  $('#image-container').on('click', function() {
    $(this).toggleClass('collapsed');
  });
});

This code first The .ready() method of jQuery is used to ensure that subsequent code is executed after the document is loaded. Then, the element with the id "image-container" is selected through the selector and a click event listener is added to it. When the user clicks on the element, the "collapsed" class state is toggled.

In CSS, we set the default width, height, and background color for the container, and position the overlay superimposed on top of the image to the bottom through absolute positioning. Then, achieve the folding effect by setting the height of the .collapsed class. The overlay's style sets the background color, font size, etc.

Summary
By using HTML, CSS and jQuery, we can easily achieve image folding and expansion effects. The above sample code shows a simple implementation idea and specific code examples. You can modify and extend it according to your needs and design style. I hope this article can help you implement more interesting dynamic effects in web design and development!

The above is the detailed content of HTML, CSS and jQuery: Techniques for achieving image folding and expanding effects. For more information, please follow other related articles on the PHP Chinese website!

jquery css html JS 事件选择器

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to create an infinite scrolling news list using HTML, CSS and jQueryNext article：How to create an infinite scrolling news list using HTML, CSS and jQuery

See more

HTML, CSS and jQuery: Techniques for achieving image folding and expanding effects

Related articles