vue js文字跑马灯基础版本

1.html原生方法

html有一个专门的标签---marquee，marquee标签是HTML标签中创建文字滚动的标签。

使用marquee就能实现基础的跑马灯效果。

<marquee>123123</marquee>

基本参数讲解：

• direction：表示滚动的方向，值可以是left，right，up，down，默认为left
• behavior：表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）
• loop：表示循环的次数，值是正整数，默认为无限循环
• scrollamount：表示运动速度，值是正整数，默认为6
• scrolldelay：表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
• align：表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
• bgcolor：表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
• height、width：表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度 ，（不一定非得使用官方的，也可以使用style控制）
• hspace、vspace：表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
• οnmοuseοver=this.stop() οnmοuseοut=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

注意：

marquee标签不是HTML3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果。

2.定时器方法

这是最常用的方法了 使用定时器来完成跑马灯效果

js代码：

使用dom的id控制dom（防止有冲突，所以使用id最佳）。

先判断是否需要滚动，如果文字长度无需滚动，就不用执行下面的滚动代码。

代码的重点是relative，用left控制绝对位置来实现滚动。

let paymentPromptText = document.getElementById('paymentPromptText'); // 文本的总宽度
      const textWidth=paymentPromptText.scrollWidth   
let size=0
      paymentPromptText.style.left='100px'
      const crollingst=function(){
        if(size==0-textWidth){
          size=1090
        }else{
          size--
        }
        paymentPromptText.style.left=size+'px'
        setTimeout(() => {
          crollingst()
      }, 10);
      }
        crollingst()

html代码：

<div id="paymentPromptText">123123123_—————————————————————————————————————</div>

css代码：

重点是relative

#paymentPromptText{
  /* width: 100%; */
  position: relative;
  left: 0px;
}