淘先锋技术网

首页 1 2 3 4 5 6 7

最近在做一个网页需求,需要使用jQuery实现从后向前的文本滚动效果。经过一番研究,终于成功实现了这样的效果。下面是具体的实现过程。


  $(function() {
    var len = $('#list').find('li').length;
    var height = $('#list').find('li').eq(0).height();
    var index = 1;
    $('#list').css('top', -height);
    setInterval(function() {
      $('#list').animate({
        'top': -height * (index++)
      }, 500, function() {
        if (index == len) {
          index = 0;
          $('#list').css('top', -height);
        }
      });
    }, 2000);
  });

jquery文本滚动从后向前

首先,我们获取列表项的数量和高度,并将列表项容器的top设置为负的一倍高度,让第一项不显示出来。

然后设置一个计时器,每隔两秒执行一次动画。动画中,我们将列表项容器的top属性累加一倍高度,并在动画结束后进行判断,如果已经到了最后一项,那么将索引重置为0,并将top设置为初始状态,从而实现了列表项无缝滚动。

最后,在HTML文件中需要设置一个容器,内部包含需要滚动的列表项,如下所示:


  <div id="container">
    <ul id="list">
      <li>第一项</li>
      <li>第二项</li>
      <li>第三项</li>
      <li>第四项</li>
    </ul>
  </div>

以上就是使用jQuery实现从后向前文本滚动的具体过程,希望能对大家有所帮助。