jQuery实现列表数据从右至左滚动（类似弹幕）

平常做的小项目新增的小需求，客户要求页面实现以类似弹幕的形式实现多条数据从右至左以不同的速度逐条循环滚动显示，

用css中的animation来简单实现，如有bug，请自行修改，此博客仅作参考使用。

html:

 <div class="barrage-wrapper">

 </div>

css:

.barrage-wrapper {
  position: fixed;
  padding-top: torem(100px);
  width: 100%;
  z-index: 8;
  .barrage-list {
    color: #fff;
    height: torem(70px);
    opacity: 0;
    display: inline-block;  
    .display-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    img {
      width: torem(70px);
      height: torem(70px);
      border-radius: 50%;
      background: #141540;
      border: 2px solid #141540;
      position: relative;
    }
    .barrage-headimg {
      width: torem(100px);
      overflow-x: hidden;
      height: torem(120px);
      .time {
        height: torem(30px);
        padding: torem(3px);
        border-radius: 5px;
        background: #141540;
      }
    }

    .barrage-text {
      background: #141540;
      white-space: nowrap;
      margin: 0 -.5rem;
      padding: .15rem .7rem;
    }
    .gift-icon {
      width: torem(70px);
      height: torem(70px);
    }
  }
}

@-webkit-keyframes right {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(torem(1000px), 0, 0);
    transform: translate3d(torem(1000px), 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(torem(-1000px), 0, 0);
    transform: translate3d(torem(-1000px), 0, 0)
  }
}

js:

    var news_recket = indexListInfo.news_rocket;
    var speed=[
        '9',
        '7',
        '9',
        '9',
        '9',
        '9',
        '9',
        '9',
        '9',
        '9'
    ];
    var delay=[
        '1.5',
        '0.1',
        '3.5',
        '6.5',
        '25',
        '8',
        '10.5',
        '16',
        '14',
        '17'
    ];
    var top_number=[
        '100',
        '170',
        '220',
        '270',
        '320',
        '370',
        '420',
        '170',
        '290',
        '370'
    ];

    var html='';

    for(var a=0;a<news_recket.length;a++){
        if(1){
            var head_img=news_recket[a].head_img;
            var insert_time = getLocalTime(news_recket[a].insert_time);          
            var msg_info=news_recket[a].msg_info;
            var image=news_recket[a].image;

            var cssstyle={};
            cssstyle={"top":top_number[a]/75+'rem',"-webkit-animation":'right '+speed[a]+'s infinite '+delay[a]+'s linear'};

            var ceshi='<div class="barrage-list"><div class="display-list">' +
              '<div><img class="reImg"  src="'+head_img+'"></div>'+               
                '<div class="barrage-text">'+msg_info+'</div>' +
                '<div class="gift-icon"><img class="giftIcon" src="'+image+'" alt=""></div>' +
                '</div></div>';
           
            html+=ceshi;
        }
    }

    $('.barrage-wrapper').append(html);
    var barrageList=$('.barrage-list');
    $.each(barrageList,function (a,item) {
        var cssstyle={};
        cssstyle={"top":top_number[a]/75+'rem',"-webkit-animation":'right '+speed[a]+'s infinite '+delay[a]+'s linear'};
         $(item).css(cssstyle);
    });

json:

{
  "ret_code": "0",
  "ret_msg": "ok",
  "data": {
    "news_rocket": [
      {
        "head_img": "http://xxx",
        "image": "http://xxx",
        "insert_time": 111111111111,
        "msg_info": "祝贺【xxxx】拼裝出一枚【xxx】",
        "nickname": "xxxx"
      },
      {
        "head_img": "http://xxx",
        "image": "http://xxx",
        "insert_time": 2222222222,
        "msg_info": "祝賀【xxxx】拼裝出一枚【xxx】",
        "nickname": "xxxx"
      },
      {
        "head_img": "http://xxx",
        "image": "http://xxx",
        "insert_time": 2222222222,
        "msg_info": "祝賀【xxxx】拼裝出一枚【xxx】",
        "nickname": "xxxx"
      },
      {
        "head_img": "http://xxx",
        "image": "http://xxx",
        "insert_time": 2222222222,
        "msg_info": "祝賀【xx】拼裝出一枚【xxx】",
        "nickname": "xx"
      }      
    ]
  }
}

效果图