滚动条自动滚动显示倒计时

滚动条自动滚动显示倒计时

一、css实现：先来个基础的不考虑文字内容长度等一些因素，只要内容往上动起来

.files_content_text { /* 此为想动起来的区域*/
  display: inline-block;
  animation: 15s wordsLoop linear infinite normal;
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateY(120px);  /*文本开始位置*/
    -webkit-transform: translateY(120px);
  }
  100% {
    transform: translateY(-30%); /*文本结束位置*/
    -webkit-transform: translateY(-30%);
  }
}

.files_content_text:hover,
.files_content_text:focus { /*根据鼠标时间暂停滚动*/
animation-play-state: paused;
}

依据上面我们已经实现了文本内容上移，有些bug，文字内容上移后，停止自动滚动，鼠标滚动回不到最开始的文本头，还有就是文本内容没有超出页面高度，应不滚动。滚动一次之后应停止

二、在我的探索下，发现了一个HTML标签marquee

<marquee onMouseOver="this.stop()"
         onMouseOut="this.start()"
         direction="up"
         class="files_content_text">
         文本内容
</marquee>

标签属性

• direction：滚动的方向，默认为left（left，right，up，down）
• behavior：滚动的方式，（scroll=>连续滚动 slide=>滑动一次 alternate=>来回滚动）
• loop： 表示循环的次数，值是正整数，默认为-1无限循环 （loop=“-1”）
• scrollamount： 表示运动速度，滚动速度是设置每次滚动时移动的长度，以像素为单位（值是正整数，默认为6）
• scrolldelay ：设置滚动的时间间隔，单位是毫秒，默认为0，单位是毫秒
• align 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
• bgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
• height、width： 表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100% height为标签内元素的高度。
• hspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
• 标签鼠标事件： οnmοuseοver=this.stop() οnmοuseοut=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。(从我实践的来看，鼠标移开的时，没有继续滚动)

这个标签也没有实现我上面所提出的bug（marquee标签可以通过behavior控制滚动次数实现除外（但是还没滚动到底就 停止了）），还有就是marquee标签已经被淘汰了，一些属性和浏览器不可用

三、让滚动动画只走一次且停留在动画最后状态

.files_content_text {
  display: inline-block;
  animation: 10s wordsLoop linear forwards normal; /*forwards 停留在动画最后状态*/
  animation-iteration-count: 1; /*动画次数*/
}

四、根据文本内容长度判断是否需要滚动

    roll () {
      var filesContentText = document.getElementsByClassName('files_content_text')[0]
      var height = filesContentText.clientHeight
      if (height > 557) {
        filesContentText.setAttribute('style', 'animation: 10s wordsLoop linear forwards normal;animation-iteration-count: 1;')
      }
    }


.files_content_text {
  width: 1157px;
  /* height: 673px; */
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  line-height: 25px;
  margin-top: 2px;
}
.files_content_text {
  display: inline-block;
  /* animation: 10s wordsLoop linear forwards normal; */
  /* animation-iteration-count: 1; */
}

@-webkit-keyframes wordsLoop {
  0% {
    transform: translateY(200px);
    -webkit-transform: translateY(200px);
  }
  100% {
    transform: translateY(-30%);
    -webkit-transform: translateY(-30%);
  }
}
 

五、根据滚动动画animation设置的时间，显示倒计时。

    // 判断是否要滚动
    roll () {
      var filesContentText = document.getElementsByClassName('files_content_text')[0]
      var height = filesContentText.clientHeight
      if (height > 557) {
        filesContentText.setAttribute('style', 'animation: 15s wordsLoop linear forwards normal;animation-iteration-count: 1;')
      }
      this.countdown = 15
      // 开始倒计时
      this.interval = setInterval(this.countdownMethod, 1000)
    },
    // 倒计时
    countdownMethod () {
      this.countdown = this.countdown - 1
      console.log('继续输出', this.countdown)
      if (this.countdown === 0) {
        clearInterval(this.interval)
        console.log('停止', this.countdown)
      }
    }

六、HTML部分

          <!-- 隐私文件内容 -->
          <div class="files_content">
            <span v-if="!privacyAgreement"
                  class="files_content_text">
              <p style='text-align:center;'><b>隐私协议</b></p><br /></p>
            </span>
            <span v-if="privacyAgreement"
                  class="files_content_text"
                  v-html="privacyAgreement"></span>
          </div>