我正在尝试使用 CSS 动画构建自动滚动列表。
我现在得到了什么：
.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;
}
}
<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>
问题是，是否有可能使Player 1显示在Play 4当它从顶部消失时？就像一个端到端的圆圈。
JavaScript 解决方案是一种选择。
尝试这个Demo. http://jsfiddle.net/stanze/pbg7vLj7/
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));
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
