jQuery之图片关联伸缩效果

实力
491 阅读4分钟

jQuery是一个非常流行的JavaScript库，提供了方便的API来简化DOM操作、事件处理和动画效果等方面的编程。在Web开发中，图片展示效果是一个重要的方面，例如在产品介绍页面中，我们经常需要显示多张图片并进行交互式展示。

实现思路

我们可以使用CSS3的transform和过渡（transition）属性来实现图片的缩放效果。同时，我们通过jQuery监听鼠标移动事件，并根据鼠标位置更新图片的大小和位置，从而实现关联伸缩效果。具体的实现步骤如下：

  1. 在HTML中创建一个包含待展示图片的元素，并将其设置为相对定位（position:relative），以便进行绝对定位的子元素。

  2. 在该元素中创建多个子元素，并将它们设置为绝对定位（position:absolute）。每个子元素都应该包含一张待展示的图片，并设置初始的位置和大小样式。

  3. 当鼠标移动到某个图片上时，我们需要通过jQuery监听“mouseenter”事件，并更新该图片的大小和位置样式以触发缩放动画效果。

  4. 当鼠标离开该图片时，我们需要通过jQuery监听“mouseleave”事件，并还原该图片的初始大小和位置样式以结束缩放动画效果。

下面将逐步介绍具体的代码实现步骤。

HTML结构

我们需要在HTML中创建一个包含待展示图片的元素，并将其设置为相对定位（position:relative），以便进行绝对定位的子元素。在这个例子中，我们使用div元素包含多个img元素，并添加自定义的class名以便在CSS和jQuery中进行样式设置。

<div class="image-container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  ...
</div>

CSS样式

我们需要为多个图片设置初始的位置和大小样式，并使用CSS3的transform和过渡（transition）属性来定义缩放动画效果。在这个例子中，我们使用了以下样式：

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease-in-out;
  transform-origin: center center;
}

.image-container img:hover {
  z-index: 1;
  transform: scale(1.2, 1.2);
}

在这个样式中，我们为image-container类设置position属性为relative，以便后续进行定位。我们还为image-container img元素设置了一些基本样式，包括绝对定位、宽度和高度等。同时，我们使用了object-fit属性确保图片可以按比例填充容器。

对于动画效果，我们为image-container img元素设置了一个过渡（transition）属性，指定变换（transform）属性的执行时间和缓动函数。当鼠标移动到该元素上时，我们将其z-index属性设置为1，使其处于顶部显示。同时，我们使用transform:scale()将元素放大1.2倍，并设置transform-origin属性以便更准确地缩放。

jQuery代码

我们需要通过jQuery监听“mouseenter”和“mouseleave”事件，并更新该图片的大小和位置样式以触发和结束缩放动画效果。具体的实现步骤如下：

  1. 获取待展示图片的容器元素，并将其保存到变量中。
const imageContainer = $('.image-container');
  1. 在鼠标移动到某个图片上时，通过jQuery监听“mouseenter”事件并更新该图片的大小和位置样式以触发缩放动画效果。
imageContainer.on('mouseenter', 'img', function() {
  $(this).css({
    'z-index': 1,
    transform: 'scale(1.2, 1.2)'
  });
});

在这个代码中，我们使用on()方法监听imageContainer元素上的“mouseenter”事件，并限定目标元素为img元素。在回调函数中，我们使用$(this)获取当前触发事件的img元素，并更新其z-index和transform属性，使其放大1.2倍。

  1. 在鼠标离开该图片时，通过jQuery监听“mouseleave”事件并还原该图片的初始大小和位置样式以结束缩放动画效果。
imageContainer.on('mouseleave', 'img', function() {
  $(this).css({
    'z-index': 0,
    transform: 'scale(1, 1)'
  });
});

在这个代码中，我们使用on()方法监听imageContainer元素上的“mouseleave”事件，并限定目标元素为img元素。在回调函数中，我们使用$(this)获取当前触发事件的img元素，并将其z-index属性设置为0，恢复初始大小并结束缩放动画效果。

完整代码

下面是完整的HTML、CSS和jQuery代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片关联伸缩效果</title>
  <style>
    .image-container {
      position: relative;
    }

    .image-container img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .2s ease-in-out;
      transform-origin: center center;
    }

    .image-container img:hover {
      z-index: 1;
      transform: scale(1.2, 1.2);
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(function() {
      const imageContainer = $('.image-container');

      imageContainer.on('mouseenter', 'img', function() {
        $(this).css({
          'z-index': 1,
          transform: 'scale(1.2, 1.2)'
        });
      });

      imageContainer.on('mouseleave', 'img', function() {
        $(this).css({
          'z-index': 0,
          transform: 'scale(1, 1)'
        });
      });
    });
  </script>
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg">
    <img src="image2.jpg">
    ...
  </div>
</body>
</html>

总结

使用CSS3的transform和过渡（transition）属性可以很方便地实现图片的缩放效果。在此基础上，我们通过jQuery监听鼠标移动事件，并根据鼠标位置更新图片的大小和位置样式，从而实现关联伸缩效果。在Web开发中，图片展示效果是一个重要的方面，我们需要注重图片的展示效果，适当使用动画效果来提高页面的吸引力和交互性。同时，jQuery为我们提供了方便的API，使得代码编写更加简单和高效。

avatar
文章
阅读
粉丝