我在我的网站上使用BXslider Jquery作为新闻自动收报机,这个插件工作正常但问题是新闻进入下一行并展开整个标题,这使得网站看起来有点尴尬。
如何以单线方式实现新闻自动收报机?
HTML
<ul id="top-ticker">
<li>Test TEST TEST TEST TEST TEST TEST TEST</li>
</ul>
Javascript Code
jQuery(function($) {
if( $("#top-ticker").length > 0 ) {
var topTicker = $('#top-ticker').bxSlider({
mode: 'vertical',
pager: false,
controls: false,
auto: true,
speed: 4000,
onSliderLoad: function() {
$('#top-ticker').addClass('ticker-loaded');
}
});
}
});
CSS样式
/* top ticker */
#top-ticker {
list-style: none;
margin: 0;
padding: 0;
}
#top-ticker li {
display: block;
padding: 1px 0
}
#top-ticker li + li {
display: none;
}
#top-ticker.ticker-loaded li + li {
display: block;
}
.fl-page-bar-text .bx-wrapper .bx-viewport {
background: none;
border: none;
box-shadow: none;
}
答案 0 :(得分:0)
试试这个:
#top-ticker li {
/* Prevent from going to new line */
white-space: nowrap;
/* Prevent the horizontal scroll bar */
overflow: hidden;
}