我正在尝试让文本循环遍历短语列表,显示在同一行上,并且无论字符串长度和屏幕大小如何都居中。通过在 SE 上找到一个线程,我已经能够让文本循环显示在同一行上。我现在遇到的问题是试图在育儿 div 中将该文本居中。字符串的长度都不同,因此我无法设置宽度,并且
我一直在绞尽脑汁想如何实现这一目标,并且让 Google 和我自己都筋疲力尽。有谁知道如何实现这种效果?
关于我目前拥有的 JSfiddle:http://jsfiddle.net/eh3sxko8/
html:
<div class="container">
<ul id="cyclelist">
<li>Some Title</li>
<li>Another Title</li>
<li>Yet another</li>
</ul>
</div>
CSS:
.container{
width:100%;
}
ul#cyclelist {
position:relative;
overflow:hidden;
height:50px;
}
ul#cyclelist li {
opacity:0;
position:absolute;
overflow:hidden;
}
js:
$(document).ready(function() {
var j = 0;
var delay = 2000; //millisecond delay between cycles
function cycleThru(){
var jmax = $("ul#cyclelist li").length -1;
$("ul#cyclelist li:eq(" + j + ")")
.animate({"opacity" : "1"} ,400)
.animate({"opacity" : "1"}, delay)
.animate({"opacity" : "0"}, 400, function(){
(j == jmax) ? j=0 : j++;
cycleThru();
});
};
cycleThru();
});
最佳答案
请检查: jsFiddle .
CSS:
ul#cyclelist {
padding-left: 0px;
}
ul#cyclelist li {
width: 100%;
text-align: center;
}
关于jquery - 水平居中滚动列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26371713/