Question

我正在尝试使用CSS动画构建自动滚动列表。

我现在得到了什么：

＆＃13;

.players {
  -webkit-transition: opacity 0.5s ease-out;
  -webkit-animation: autoScrolling 5s linear infinite;
  height: 20em;
}
.players .list-group-item {
  height: 5em;
}
@-webkit-keyframes autoScrolling {
  from {
    margin-top: 0;
  }
  to {
    margin-top: -20em;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-6">
    <ul class="list-group players">
      <li class="list-group-item">Player 1</li>
      <li class="list-group-item">Player 2</li>
      <li class="list-group-item">Player 3</li>
      <li class="list-group-item">Player 4</li>
    </ul>
  </div>
</div>

＆＃13;

问题是，当它从顶部消失时，是否可以在 Play 4 下显示 Player 1 ？就像一个端到端的圈子。

JavaScript解决方案是一种选择。

Answer 1

试试这个Demo.

window.players = function($elem) {
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('.players > li').height();
    if(top < temp) {
        top = $('.players').height()
        $elem.css("top", top);
    }
    $elem.animate({ top: (parseInt(top)-60) }, 600, function () {
      window.players($(this))
    });
}
$(document).ready(function() {
    var i = 0;
    $(".players > li").each(function () {
          $(this).css("top", i);
          i += 60;
          window.players($(this));
    });
});

Answer 2

您可以尝试这样的事情

$(".list-group-item:first").clone().appendTo($(".list-group")).hide().show('slow');
$(".list-group-item:first").hide('slow');
setTimeout(function(){
  $(".list-group-item:first").remove();
},500);

希望它有所帮助！

如何创建自动滚动列表

2 个答案: