JS实现的点击按钮图片上下滚动效果示例

下面我将详细讲解JS实现的点击按钮图片上下滚动效果示例的完整攻略。

概述

这个效果是指，当用户点击页面中的按钮时，页面上的图片会上下滚动一定的距离。整个过程中需要用到以下三个关键点：按钮的事件监听、图片的滚动效果和滚动距离的计算。下面我们将逐一进行讲解。

一、按钮的事件监听

通过以下代码，我们可以实现这个效果：

let btn = document.querySelector('.scroll-btn');
let imgs = document.querySelector('.scroll-imgs');
let imgHeight = imgs.firstElementChild.offsetHeight;
let curPosition = 0;
btn.onclick = function() {
  curPosition = curPosition - imgHeight;
  if (curPosition < -imgs.offsetHeight) {
    curPosition = 0; 
  }
  imgs.style.transform = `translateY(${curPosition}px)`;
}

这里使用了querySelector函数来获取HTML页面中的目标元素。首先，我们用let关键字定义了三个变量，btn代表按钮元素，imgs代表图片外层的容器元素，imgHeight代表单张图片的高度，curPosition代表当前的图片滚动所处的位置。为了达到图片循环滚动的效果，当curPosition小于了图片总高度后，我们将其重新赋值为0。

接着，我们为按钮绑定了点击事件，当点击事件触发后，我们修改了滑动距离curPosition的值，并将其赋值给图片的transform属性中。translateY()是CSS中的一个属性，作用是调整元素的垂直方向的位置。

二、滚动效果的实现

第二步，即如何实现图片的滚动效果。在第一步中我们已经设置了图片垂直位置的属性，我们可以试着将它放在一个无穷循环动画中，达到滚动效果。以下是代码实现：

.scroll-imgs {
  animation: scrolling 10s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

这里我们使用CSS中的@keyframes动画和animation属性来实现。animation属性的linear参数表示将动画设置为线性的，滚动时间为10秒，infinite参数使动画循环播放。在@keyframes中，我们设置了两个关键帧，0%表示初始状态，即元素不动，100%表示元素完全滚出屏幕，这样一来，当这个动画被赋给图片所在的容器后，整个容器就会开始一个无穷的循环滚动。

三、滚动距离的计算

最后，我们来讲一下如何计算滚动距离。根据代码中第一个步骤中提到的变量：imgHeight、curPosition以及页面中的图片数量，我们可以很容易的实现滚动距离的计算。以下是代码实现：

let imgNum = imgs.children.length;  // 获取图片数量
let scrollHeight = imgHeight * imgNum;  // 计算总滚动距离
let limitHeight = imgs.offsetHeight;  // 计算图片区域高度，用于判断是否需要滚动
if (scrollHeight > limitHeight) {
  btn.style.display = 'block';  // 当图片区域高度小于总滚动距离时，显示按钮
}

在这段代码中，我们首先通过imgs.children属性获取了页面中图片的数量，然后再通过imgHeight来算出了图片容器需要滚动的总距离scrollHeight

在最后，我们还使用了变量limitHeight来检查图片容器的高度是否小于scrollHeight，当其小于scrollHeight时，意味着图片还没占满整个图片容器，此时无需滚动。

示例说明

我们以Codepen为例，可以将以上HTML、CSS、JS代码复制粘贴到不同的文件区域，在编写完成后即可进行预览。

在JS方面，代码的最终实现就是通过为按钮绑定点击事件，并对图片滚动进行属性的变更。而滚动效果的实现则是借助了CSS中@keyframe动画和animation 属性的循环播放属性，实现了图片的循环滚动。这里需要注意的是，我们需要计算图片容器的总滚动高度，以区分整个页面是否足够大，具体实现可以通过JS来判断。

在CSS方面，主要关注的是通过translateY()设置垂直方向位置来实现图片滚动的效果。

以上就是JS实现的点击按钮图片上下滚动效果示例的完整攻略。