HTML, CSS and jQuery: Make an animated sliding window-JS Tutorial-php.cn

HTML, CSS and jQuery: Make an animated sliding window

WBOY

Release： 2023-10-24 11:18:22

Original

1109 people have browsed it

HTML, CSS and jQuery: Make an animated sliding window

HTML, CSS and jQuery: Make a sliding window with animated effects

Nowadays, web design pays more and more attention to user experience and animation effects. Through some simple code, you can create a cool sliding window effect. This article will introduce you to how to use HTML, CSS and jQuery to create a sliding window with animated effects, and provide specific code examples.

First, we need to create an HTML structure and add the necessary CSS styles to it. The following is an example HTML structure:

<!DOCTYPE html>
<html>
<head>
  <title>滑动窗口</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slide">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="slide">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="slide">
        <img src="image3.jpg" alt="Image 3">
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Copy after login

Next, we add the corresponding CSS style according to the HTML structure. The following is an example CSS style:

.slider-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 300%;
  animation: slide 15s infinite;
}

.slide {
  flex: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
  }
  66% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0);
  }
}

Copy after login

In the above code, we create a .slider-container container to wrap the content of the sliding window. By setting overflow: hidden, we can hide the content of the overflow part. .slider is the main part of the sliding window. We use display: flex to display all sliding elements in one row. .slide is the container of each sliding element, which contains an image. By setting flex: 1, each sliding element can be distributed evenly across the width of the container.

Next, we use jQuery to achieve the sliding animation effect. Add the following code in the script.js file:

$(document).ready(function() {
  $('.slider').hover(function() {
    $(this).stop();
  }, function() {
    $(this).animate({ 'margin-left': '-100%' }, 5000, function() {
      $(this).css('margin-left', '0');
    });
  });
});

Copy after login

In the above code, use $(document).ready() to ensure that the code is executed after the document is loaded. The animation will stop when the mouse is hovered over the sliding window. When the mouse is removed, the sliding window will slide left to the next picture with a 5-second animation time, and restart after the last picture.

Finally, we also need to create a style.css file and introduce it into HTML to set the style of the sliding window. Add the following code to the file:

body {
  margin: 0;
  padding: 0;
}

.slider-container {
  margin: 50px auto;
}

Copy after login

With the above code, we set the margins and padding of the entire document, as well as the outer margins of the sliding window container.

The above is all the code examples required to create a sliding window with animation effects. Through the combination of HTML, CSS and jQuery, we can easily achieve a cool sliding window effect. In actual use, further style and interaction adjustments can be made according to your own needs. Hope this article is helpful to everyone!

The above is the detailed content of HTML, CSS and jQuery: Make an animated sliding window. For more information, please follow other related articles on the PHP Chinese website!