0
我正在創建一個列表新聞股票，發現該鏈接一個簡單的實現： jQuery News Ticker樣式新聞速遞，包括Break語句
我想包括所生成的動態列表裏面的內容<br>聲明，並會像新聞股票自動管理股票行情的高度。
但是，包含<br/>元素的列表項不會以多行顯示新聞項目。 請注意，在我的實際代碼中，列表內容將被動態生成，因此，我的新聞動態應該能夠管理其內容中的任意數量的<br/>，並動態管理股票行情的高度。
任何人都可以請建議如何做到這一點？
這裏是我的示例代碼：
var ticker = $("#ticker");
var t;
var li_count = 1;
var li_length = $("ul.news-list li").length;
var li = $("li").first();
var runTicker = function(trans_width) {
$(li).css({
"left": +trans_width + "px"
});
t = setInterval(function() {
if (parseInt($(li).css("left")) > -$(li).width()) {
$(li).css({
"left": parseInt($(li).css("left")) - 1 + "px",
"display": "block"
});
} else {
clearInterval(t);
trans_width = ticker.width();
li = $(li).next();
if (li_count == li_length) {
li_count = 1;
li = $("li").first();
runTicker(trans_width);
} else if (li_count < li_length) {
li_count++;
setTimeout(function() {
runTicker(trans_width);
}, 500);
}
}
}, 5);
}
$(ticker).hover(function() {
clearInterval(t);
},
function() {
runTicker(parseInt($(li).css("left")));
});
runTicker(ticker.width());#ticker {
line-height: 1.8em;
max-width: 600px;
color: #000;
overflow: hidden;
min-height: 40px;
height: auto;
}
.news-list {
padding: 0;
margin: 0;
position: relative;
list-style-type: none;
}
ul.news-list>li {
position: absolute;
white-space: nowrap;
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
<ul class="news-list">
<li>
<p>My Paragraph<br/> with break.</p>
</li>
<li>
<ul>
<li>My Paragraph</li>
</ul>
</li>
<li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
</ul>
</div>
@mplungjan：兩種建議不起作用的選項。我想保持高度動態和它不能正常工作在這裏。 –
不，如果你看到我的例子，當我的內容有一個「Break」元素時，新聞項目不能正確顯示，它會在中斷元素之後切割內容。 在我的應用程序中，新聞項目可以有任意數量的「Break」元素，因此，我想動態管理新聞選取器的高度，併成功顯示包含任意數量「Break」元素的新聞項目。 –
它引起的問題，如新聞項目內容的最後一個字符未清除。請看看這個小提琴： https://jsfiddle.net/ashu_mdu/qaohqxpc/ –