如何用jQuery实现水平单条文字从右到左依次自动滚动的新闻播报效果

解决思路 #

• 移除原有所有li元素统一绑定的无限动画，避免所有内容同时滚动
• 定义单条新闻的滚动关键帧，控制单条内容从右侧入场、向左滚动至完全离开容器的完整过程
• 用jQuery维护滚动队列，监听单条滚动完成事件后自动触发下一条新闻的滚动，实现依次循环播放

完整实现代码 #

调整后的CSS代码 #

ul {
  width: 100%;
  height: 30px;
  overflow: hidden;
  position: relative;
  background: black;
  color: white;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: nowrap;
}

ul li {
  position: absolute;
  display: inline-block;
  width: 90%;
  left: 5%;
  height: 100%;
  font-size: 20px;
  line-height: 30px;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  color: white;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

/* 滚动动画定义 */
@-moz-keyframes news_scroller {
  0% {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@-webkit-keyframes news_scroller {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}
@keyframes news_scroller {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

li.scrolling {
  -moz-animation: news_scroller 5s linear forwards;
  -webkit-animation: news_scroller 5s linear forwards;
  animation: news_scroller 5s linear forwards;
}

HTML代码（和原有结构保持一致） #

<ul class="news_scroller">
  <li>some text here askdadjsdkjaskjdkajs</li>
  <li>some more text here second news to show/scroll</li>
  <li>another one here bla bla bla</li>
  <li>sdfihjhgahr89we7 8rtgdsofui gysdhfhoj dsdf</li>
</ul>
<!-- 请自行在页面中引入3.x版本的jQuery库 -->

jQuery逻辑代码 #

$(function() {
  const $newsList = $('.news_scroller li');
  const total = $newsList.length;
  let current = 0;

  function runScroll() {
    const $currentItem = $newsList.eq(current);
    // 重置当前元素状态
    $currentItem.removeClass('scrolling').css('transform', 'translateX(100%)');
    // 触发DOM重绘保证重置生效
    void $currentItem[0].offsetWidth;
    // 添加滚动类启动动画
    $currentItem.addClass('scrolling');
    // 监听动画结束，触发下一条滚动
    $currentItem.one('animationend webkitAnimationEnd mozAnimationEnd', function() {
      $(this).removeClass('scrolling').css('transform', 'translateX(100%)');
      current = (current + 1) % total;
      runScroll();
    })
  }

  // 启动第一条滚动
  runScroll();
})

自定义调整说明 #

• 想要修改滚动速度：调整li.scrolling的animation属性中的时长数值，数值越大滚动速度越慢
• 想要取消循环播放：在current自增后判断是否等于total，如果等于就不再调用runScroll()即可
• 想要修改单条滚动间隔：可在调用runScroll()前加setTimeout自定义延迟时长

内容的提问来源于stack exchange，提问作者Alexandru Vlas