jQuery如何实现图片推拉门动画效果

发布时间：2023-05-14 05:24:53

图片推拉门动画效果是一种常见的网页交互效果，可以让网页内容更加生动，吸引用户注意力。使用jQuery可以比较方便地实现图片推拉门动画，下面我们来分步骤演示具体实现方法。

1. HTML结构

首先，在HTML中需要定义出需要进行推拉门动画效果的图片。假设我们有两张图片，分别为"pic1.jpg"和"pic2.jpg"，然后我们定义一个div容器，作为包含这两个图片的容器，如下所示：

<div class="slider">
  <img src="pic1.jpg" alt="pic1" class="slide1">
  <img src="pic2.jpg" alt="pic2" class="slide2">
</div>

其中，div容器的class属性为"slider"，表示这是一个幻灯片容器。两张图片分别有独立的class属性值"slide1"和"slide2"，方便后面实现动画效果时选择使用。

2. CSS样式

接下来，我们需要针对上述HTML结构定义一些基本的CSS样式，包括对容器和图片的样式定义，如下所示：

.slider {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  opacity: 0;
  height: 100%;
  width: 100%;
  border: none;
}

其中，容器使用了相对定位(position: relative)，并且设置了固定的宽度和高度，以便容器内的图片有一个统一的尺寸。为了实现图片之间的切换动画效果，我们需要先将图片的不透明度(opacity)设置为0，隐藏图片。至于为什么要设置为绝对定位(position: absolute)，是因为后面动画效果需要根据图片位置进行计算。

3. jQuery实现动画

接下来，我们使用jQuery来实现图片推拉门动画效果。实现的逻辑是：通过点击容器，切换两张图片的不透明度，使得其中一张图片显示，并且从容器的边缘滑入，同时另外一张图片则从容器的另一侧滑出。

$(function() {
  var slider = $('.slider');
  var slide1 = $('.slide1');
  var slide2 = $('.slide2');
  var isSlide1 = true;

  slider.on('click', function() {
    if (isSlide1) {
      slide1.animate({
        opacity: 1,
        left: '0%'
      }, 700);
      slide2.animate({
        opacity: 0,
        left: '-100%'
      }, 700);
      isSlide1 = false;
    } else {
      slide2.animate({
        opacity: 1,
        left: '0%'
      }, 700);
      slide1.animate({
        opacity: 0,
        left: '100%'
      }, 700);
      isSlide1 = true;
    }
  });
});

首先，我们定义了容器、两个图片、和一个变量isSlide1。isSlide1表示当前显示的是slide1还是slide2，初值设置为true，即默认显示slide1。

然后，我们在容器上绑定了点击事件，通过判断isSlide1的值，进行图片动画切换。次点击时，我们使用slide1.animate()方法，将slide1的不透明度设置为1，同时将left属性设置为'0%'，使得slide1从左侧滑入，同时使用slide2.animate()方法，将slide2的不透明度设置为0，同时将left属性设置为'-100%'，使得slide2从右侧滑出，动画时间设置为700毫秒。

接下来，我们需要交替切换动画：第二次点击时，需要使用slide2.animate()方法将slide2的不透明度设置为1，同时将left属性设置为'0%'，使得slide2从左侧滑入，同时使用slide1.animate()方法将slide1的不透明度设置为0，同时将left属性设置为'100%'，使得slide1从右侧滑出。

至此，我们就成功地实现了图片推拉门动画效果。为了使得动画效果更加平稳流畅，我们可以为容器和图片添加过渡动画效果(transition)。完整的代码如下：

<html>
<head>
  <style>
    .slider {
      position: relative;
      width: 600px;
      height: 400px;
      overflow: hidden;
      transition: all 0.7s ease-in-out;
    }

    .slider img {
      position: absolute;
      opacity: 0;
      height: 100%;
      width: 100%;
      border: none;
      transition: all 0.7s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="slider">
    <img src="pic1.jpg" alt="pic1" class="slide1">
    <img src="pic2.jpg" alt="pic2" class="slide2">
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(function() {
      var slider = $('.slider');
      var slide1 = $('.slide1');
      var slide2 = $('.slide2');
      var isSlide1 = true;

      slider.on('click', function() {
        if (isSlide1) {
          slide1.css({
            opacity: 1,
            left: '0%'
          });
          slide2.css({
            opacity: 0,
            left: '-100%'
          });
          isSlide1 = false;
        } else {
          slide2.css({
            opacity: 1,
            left: '0%'
          });
          slide1.css({
            opacity: 0,
            left: '100%'
          });
          isSlide1 = true;
        }
      });
    });
  </script>
</body>
</html>