Question

我正在尝试通过短语列表循环文本，显示在同一行并且无论字符串长度和屏幕大小如何都居中。我已经能够通过在SE上找到一个线程来获取文本循环并显示在同一行上。我现在遇到的问题是尝试将该文本置于父母div中。字符串都将是不同的长度，所以我不能设置宽度，

需要绝对定位，以便它们显示在同一行。

我一直在摸索如何实现这一目标，并让谷歌和我自己筋疲力尽。有谁知道如何实现这种效果？

JS解析我到目前为止所做的事：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();

 });

Answer 1

请检查： jsFiddle 。

CSS：

ul#cyclelist {
    padding-left: 0px;
}

ul#cyclelist li {
    width: 100%;
    text-align: center;
}

水平居中滚动列表

1 个答案: