前端实现循环弹幕效果

微信h5要实现循环弹幕效果，直接上代码
 

<div class="danmu">
    <div class="my-inbox" ref='box' >
      <div class="danmudetal" v-for="item in danmu1" :style="'margin-right:' + item.speed + 'px'">
        <img :src="item.headImgUrl" alt="">{{item.nickName}}打赏了{{item.num}}个{{item.giftType==0? '爱心':'钻石'}}
      </div>
    </div> 
</div> 

这里给的margin-right是为了给弹幕一个随机的间距，这样显得比较随机

js代码

获取屏幕宽度，在调用test的方法时候，弹幕先从最右边屏幕出来，如果不给box重置padding-left，那弹幕每次都在屏幕的最左边，无法实现效果，我刚开始把padding-left放在标签上了，后来样式被重置，无法生效

this.left=document.body.clientWidth

test(){
  var target = this.$refs.box; 
  var initLeft = 0; 
  setInterval(function(){
    initLeft ++;
    if(initLeft >= target.offsetWidth  ){
      initLeft = 0;
    }
    target.style = 'padding-left: '+ this.left + 'px;' +'transform: translateX(-'+ initLeft +'px)';
  },16)
},

css代码

.danmu{
    position: absolute;
    z-index: 11;
}
.my-inbox{
    white-space: nowrap;
    height: 3.2rem;
}

这样就简单实现了弹幕效果