CSS/JS文字滚动

1、 文字上下滚动（vue）

<template>
  <div class="scroll-temp">
    <img :src="noticePng" alt="" class="scroll-img">
    <div ref="scroll" class="scroll-box">
      <div v-for="item in scrollList" :key="item.id" class="scroll-content">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
// 引入滚动提示图片
import noticePng from '@/assets/images/notice.png'
export default {
  props: {
    scrollData: { // 滚动的数据
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      noticePng, // 滚动图片
      scrollArea: '', // 滚动的区域
      speed: 10, // 滚动的速度
      timer: null,
      timeObj: null,
      delay: 3000, // 停留的时间
      contentHeight: '',
      scrollList: [] // 滚动的数据
    }
  },
  watch: {
    scrollData: {
      handler(val) {
        this.scrollList = JSON.parse(JSON.stringify(val))
        this.initScroll()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 滚动初始化
    initScroll() {
      this.$nextTick(() => {
        this.scrollArea = this.$refs.scroll
        // 需要滚动的全部内容
        const content = this.scrollArea.getElementsByClassName('scroll-content')
        // 其中的一个内容高度
        this.contentHeight = content[0].offsetHeight
        // 初始的滚动距离是0
        this.scrollArea.scrollTop = 0
        // 为了无缝滚动，进行拼接
        this.scrollArea.innerHTML += this.scrollArea.innerHTML
        if (this.scrollData.length) { // 数据存在
          // 循环数据滚动
          this.timeObj = setTimeout(this.scrollStart, this.delay)
        }
      })
    },
    // 开始循环滚动
    scrollStart() {
      this.timer = setInterval(this.scroll, this.speed)
      this.scrollArea.scrollTop++
    },
    scroll() {
      // 当滚动的距离和单个内容的可见区域的高度相等时
      if (this.scrollArea.scrollTop % this.contentHeight === 0) {
        // 暂停循环
        clearInterval(this.timer)
        clearTimeout(this.timeObj)
        // 重新开始循环数据滚动
        this.timeObj = setTimeout(this.scrollStart, this.delay)
      } else {
        this.scrollArea.scrollTop++
        // 当滚动的高度大于等于 内容的全部高度时
        if (this.scrollArea.scrollTop >= this.scrollArea.scrollHeight / 2) {
          this.scrollArea.scrollTop = 0
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.scroll-temp {
  overflow: hidden;
  height: 44px;
  border-radius: 4px;
  margin: 0 20px;
  padding: 12px 16px;
  background: #fff;
  font-size: 14px;
  color: #1d76f1;
  box-shadow: 0 0 6px rgba(29,118,241,0.5) inset;
  white-space: nowrap;
  display: flex;
  .scroll-img {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 2px 10px 0 0;
  }
  .scroll-box, .scroll-content{
    height: 44px;
    overflow: hidden;
  }
}
</style>

2、 文字走马灯左右滚动（css）

html：

<div class="td-style">
  <span class="td-text">内容1内容1内容1内容1内容1内容1</span>
</div>

css：

<style>
	.td-style {
      width: 160px;
      height: 72px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 26px;
      line-height: 72px;
    }
	.td-text {
	  display: inline-block;
	  white-space: nowrap;
	  animation: scrollLeft 3s linear infinite;
	}
	.td-text:hover {
	  animation-play-state: paused;
	}
	 /* 定义动画 */
	@keyframes scrollLeft {
	  0% {
	    transform: translateX(0);
	  }
	  100% {
	    transform: translateX(calc(-90% - 0px)); /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
	  }
	}
</style>