js实现盒子滚动动画效果

下面是关于"js实现盒子滚动动画效果"的完整攻略:

1.编写HTML结构

首先，在HTML文件中编写盒子结构，例如：

<div class="container">
  <div class="box" style="background-color: red;">Box 1</div>
  <div class="box" style="background-color: blue;">Box 2</div>
  <div class="box" style="background-color: green;">Box 3</div>
  <div class="box" style="background-color: yellow;">Box 4</div>
</div>

这里是一个包含4个盒子的简单结构，每个盒子的背景颜色不同。

2.设置CSS样式

接下来，在CSS文件中为盒子设置样式，以及设置包含盒子的容器的样式：

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.box {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s ease-in-out;
}

这里，我们给包含盒子的容器设置宽度、高度和overflow:hidden，以便在处理盒子滚动时，通过设置容器为不可见，只显示其中某一部分盒子的方式来实现动画效果。

为了让内容向左或向右滚动，我们让每个盒子的位置为position: absolute，并且将其放置在较低左侧部分。在随后的JavaScript中，当我们想要使一个盒子向右或向左移动时，我们将改变其left属性的值。

3.编写JavaScript

接下来，我们需要编写JavaScript代码来实现盒子的滚动效果。首先，我们需要定义一些常量和变量：

const container = document.querySelector('.container');
const boxes = document.querySelectorAll('.box');

const previousButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');

const boxWidth = boxes[0].clientWidth;
const containerWidth = container.clientWidth;
const numberOfBoxes = boxes.length;

let currentIndex = 0;
let position = 0;

这里我们使用document.querySelector()选择器来获取盒子容器和盒子。我们还获取控制滚动的前后按钮，以及计算盒子的宽度和数量。

我们还定义了一个变量currentIndex，它将跟踪当前选中的盒子的索引。position变量则将保持滚动位置的距离。

接下来，我们通过addEventListener()方法为两个控制滚动的按钮添加单击事件监听器，这些事件监听器将根据我们所点击的按钮来调用相应的函数实现。

previousButton.addEventListener('click', scrollToPreviousBox);
nextButton.addEventListener('click', scrollToNextBox);

在这里，我们定义了两个函数scrollToPreviousBox和scrollToNextBox，它们将实现向前或向后动画的功能。

滚动到前面的盒子

function scrollToPreviousBox() {

// 先删除当前选中盒子的处理
boxes[currentIndex].classList.remove('selected');

// 更新currentIndex和位置变量，使它们反映哪个盒子当前选中
currentIndex -= 1;
position += boxWidth;

// 检查我们是否已经滚动到了第一个盒子，如果是，则将当前位置变量重置为0，以便第一个盒子被重新选择
if (currentIndex === -1) {
  currentIndex = numberOfBoxes - 1;
  position = -(currentIndex * boxWidth);
}

// 为当前选中的盒子添加效果处理并应用变换样式
boxes[currentIndex].classList.add('selected');
container.style.transform = `translateX(${position}px)`;
}

这个函数首先从当前选中的盒子中删除效果，然后通过更新currentIndex和position变量来移动到前一个盒子。

接下来，我们检查是否已滚动到第一个盒子，如果是，则将当前位置变量重置为0，并将currentIndex设置为最后一个盒子的索引以循环效果。

最后，我们为新选中盒子添加效果，并采用translateX方式移动容器。

滚动到后面的盒子

function scrollToNextBox() {

// 先删除当前选中盒子的处理
boxes[currentIndex].classList.remove('selected');

// 更新currentIndex和位置变量，使它们反映哪个盒子当前选中
currentIndex += 1;
position -= boxWidth;

// 检查我们是否已经滚动到了最后一个盒子，如果是，则将当前位置变量重置为0，以便第一个盒子被重新选择
if (currentIndex === numberOfBoxes) {
  currentIndex = 0;
  position = 0;
}

// 为当前选中的盒子添加效果处理并应用变换样式
boxes[currentIndex].classList.add('selected');
container.style.transform = `translateX(${position}px)`;
}

这个函数以相同的基本方式运行，只是向前滚动而不是向后滚动。当我们到达最后一个盒子时，我们将currentIndex和position变量重置为0，并将其设为第一个盒子的索引以达到循环效果。

4.为选中的盒子应用效果

最后，我们需要为选中的盒子添加效果处理。我们将使用CSS中的一个.selected类来做到这一点：

.box.selected {
  transform: scale(1.2);
  z-index: 1;
}

在这里，当盒子被选中时，我们将其放大。我们还通过增加z-index属性来使它的叠放顺序更高，以便它显示在其余盒子的顶部。

5.效果示例

这是一个最终的Demo，可以完整展示出盒子滚动效果的实现。

<!DOCTYPE html>
<html>
<head>
  <title>JS实现盒子滚动动画效果</title>
  <style>
    .container {
      width: 300px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .box {
      width: 300px;
      height: 200px;
      position: absolute;
      left: 0;
      top: 0;
      transition: transform 0.5s ease-in-out;
    }
    .box.selected {
      transform: scale(1.2);
      z-index: 1;
    }
    .previous, .next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0,0,0,0.2);
      width: 25px;
      height: 25px;
      color: white;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
    }
    .previous {
      left: 0;
    }
    .next {
      right: 0;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="box" style="background-color: red;">Box 1</div>
  <div class="box" style="background-color: blue;">Box 2</div>
  <div class="box" style="background-color: green;">Box 3</div>
  <div class="box" style="background-color: yellow;">Box 4</div>

  <div class="previous">&lt;</div>
  <div class="next">&gt;</div>
</div>

<script>
const container = document.querySelector('.container');
const boxes = document.querySelectorAll('.box');
const previousButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');
const boxWidth = boxes[0].clientWidth;
const containerWidth = container.clientWidth;
const numberOfBoxes = boxes.length;
let currentIndex = 0;
let position = 0;

function scrollToNextBox() {
  boxes[currentIndex].classList.remove('selected');
  currentIndex += 1;
  position -= boxWidth;
  if (currentIndex === numberOfBoxes) {
    currentIndex = 0;
    position = 0;
  }
  boxes[currentIndex].classList.add('selected');
  container.style.transform = `translateX(${position}px)`;
}

function scrollToPreviousBox() {
  boxes[currentIndex].classList.remove('selected');
  currentIndex -= 1;
  position += boxWidth;
  if (currentIndex === -1) {
    currentIndex = numberOfBoxes - 1;
    position = -(currentIndex * boxWidth);
  }
  boxes[currentIndex].classList.add('selected');
  container.style.transform = `translateX(${position}px)`;
}

previousButton.addEventListener('click', scrollToPreviousBox);
nextButton.addEventListener('click', scrollToNextBox);

boxes[0].classList.add('selected');
</script>

</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现盒子滚动动画效果 - Python技术站