flex 简单跑马灯效果(竖着显示)

在网页设计中，跑马灯效果是一种常用的展示方式之一。通过滚动内容，可以吸引用户的注意力，从而更好地展示信息。本文将介绍如何使用flex布局实现一个简单的跑马灯效果，将内容竖直滚动展示。

准备工作

在开始编写代码前，我们需要准备一些环境。在本例中，我们需要一个容器和若干个子元素。容器采用flex布局，并设置为竖直方向。子元素包含我们想要展示的内容。

HTML代码如下：

<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
  <div class="item">item4</div>
  <div class="item">item5</div>
</div>

在CSS中，我们需要设置容器的宽度和高度，以及设置其为flex布局并竖直方向显示。同时，我们需要对子元素进行基本的样式设置，比如设置宽度、高度、字体大小、边框等。

CSS代码如下：

.container {
  height: 100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.item {
  width: 100%;
  height: 20px;
  font-size: 14px;
  border: 1px solid #ccc;
}

最后我们在JS中编写代码，实现文字的滚动。我们需要定时计算容器高度，然后通过改变容器的transform属性，实现竖直方向的滚动。代码如下：

var container = document.querySelector('.container');
var itemHeight = document.querySelector('.item').offsetHeight;
var scrollDistance = 0;

setInterval(function() {
  container.style.transform = 'translateY(-' + scrollDistance + 'px)';
  scrollDistance += itemHeight;

  if (scrollDistance >= container.scrollHeight) {
    scrollDistance = 0;
  }
}, 2000);

在上述代码中，我们首先获取到了容器和子元素的高度。然后，我们设置一个定时器，定时计算需要滚动的距离，然后通过修改transform属性实现滚动。同时，我们添加了一个判断，当滚动距离超过容器高度时，将距离重置为0，从而实现无限滚动的效果。

总结

本文简单介绍了如何使用flex布局实现一个基本的跑马灯效果，将内容竖直滚动展示。这种方式简单易用，同时可以提高页面的视觉效果，适用于各种类型的页面设计。