jQuery实现洗牌式图片旋转层叠切换

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-29 08:05:58

　　jQuery实现洗牌式图片旋转层叠切换

理解需求

“洗牌式图片旋转层叠切换”的效果，是指多张图片在切换时，呈现出类似洗牌时卡片翻转、层叠的效果，增加视觉动感。

实现思路

HTML结构:
- 创建一个容器，用来容纳所有的图片。
- 每个图片都放在一个单独的div中，方便定位和操作。
CSS样式:
- 设置容器的样式，包括宽高、定位等。
- 设置每个图片的样式，包括大小、位置、过渡效果等。
- 使用CSS3的transform属性来实现旋转、缩放等效果。
jQuery交互:
- 随机打乱图片的顺序。
- 为每个图片添加动画效果，实现层叠和旋转效果。
- 控制动画的播放速度和顺序。

代码示例

HTML

<!DOCTYPE html>
<html>
<head>
  <title>洗牌式图片切换</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="card"><img src="image1.jpg" alt=""></div>
    <div class="card"><img src="image2.jpg" alt=""></div>
    </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

/* style.css */
.container {
  perspective: 1000px;
}

.card {
  position: absolute;
  width: 200px;
  height: 150px;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
}

.card img {
  width: 100%;
  height: 100%;
}

JavaScript

// script.js
$(document).ready(function() {
  const cards = $('.card');

  function shuffle() {
    cards.sort(() => Math.random() - 0.5);
    cards.each((i, card) => {
      $(card).css({
        // 随机设置初始位置、旋转角度等
        left: Math.random() * 200 + 'px',
        top: Math.random() * 150 + 'px',
        transform: `rotateY(${Math.random() * 180 - 90}deg)`
      });
    });
  }

  function playAnimation() {
    cards.each((i, card) => {
      $(card).delay(i * 100).animate({
        left: '50%',
        top: '50%',
        transform: 'rotateY(0deg)'
      }, 1000);
    });
  }

  shuffle();
  playAnimation();
});

代码解释

HTML结构: 创建多个 card 元素，每个元素代表一张卡片。
CSS样式:
- perspective 属性设置透视效果，让卡片看起来有立体感。
- transform-style: preserve-3d 启用3D变换。
jQuery交互:
- shuffle 函数随机打乱卡片的顺序，并设置随机的初始位置和旋转角度。
- playAnimation 函数为每个卡片添加动画，使其向中心移动并展开。