跑马灯（走马灯）的js实现

这个跑马灯的实现思路其实跟轮播无缝连接的思路是一样的。实现的效果如下(这个软件的水印真的好明显，小小字在跑的就是跑马灯了=.=)：

跑马灯的样式和html 

    
    

        

            
1、这是第一条跑马灯！！！！！！！！！
            
2、这是第二条跑马灯！！！
            
3、这是第三条跑马灯！！！
            
1、这是第一条跑马灯！！！！！！！！！
 
        
    

样式定义如下

.notice-container {
      margin-top: 10px;
      background: #FFFFFF;
      font-size: 12px;
      color: #3E4759;
      height: 30px;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;

      .notice-icon {
        display: block;
        margin-left: 10px;
        flex-shrink: 0;
        width: 27px;
        height: 27px;
        background: url("../assets/home/icon_home_gg.png") no-repeat;
        background-size: 100% 100%;
      }

      .notice-items {
        margin: 0 0 0 6px;
        flex: 1;
        display: flex;
        overflow: hidden;

        .notice-items-inner {
          display: flex;
          width: 100%;

          p {
            flex-shrink: 0;  // 这个结合父级的flex，可以做到不换行
            margin-right: 100%; // 这里的需求是一行切换完之后才能看到下一行的需求，所以加了100%的margin
            white-space: nowrap;
          }
        }
      }
    }

js处理如下：

initHorseLamp () {
      let boxWidth = this.$refs.noticeBox.offsetWidth
      let innerWidth = 0
      let child = this.$refs.noticeInner.childNodes
      let count = 0
      child.forEach(item => {
        if (item.nodeType === 1) {
          innerWidth += parseInt(window.getComputedStyle(item).width.split('px')[0])
          count++
        }
      })
      innerWidth += boxWidth * (count - 1)
      if (innerWidth > boxWidth) {
        let padding = 0
        let animation = () => {
          padding -= 1
          this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`
          if (padding === -(innerWidth - parseInt(window.getComputedStyle(child[child.length - 1]).width.split('px')[0]))) {
            padding = 0
            this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`
          }
          this.animationId = requestAnimationFrame(animation)
        }
        animation()
      }
}