滚动新闻代码从是网上找的,自己做了一些修改,特别是新闻比较长时.
<ul class="scrollBox">
<li>
<a href="#" title="${news.title }">abc</a>
</li>
<li>
<a href="#" title="${news.title }">abc很常的新闻标题</a>
</li>
<li>
<a href="#" title="${news.title }">abc<div>${news.title }</div></a>
</li>
</ul>
<style type="text/css">
.scrollBox {
BACKGROUND: black; HEIGHT: 38px; color:white;
}
UL LI {
PADDING-BOTTOM: 0px; LINE-HEIGHT: 25px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 0px;
}
ul li {
overflow: hidden; text-overflow:ellipsis;white-space: nowrap;
}
UL LI.odd {
BACKGROUND: black;
}</style>
<script type="text/javascript">
$(document).ready(function(){
$('.scrollBox li:even').addClass('odd');
$('.scrollBox:first').scroll();
});
/*<![CDATA[*/
(function($) { // 滚动插件代码
$.fn.scroll = function(options) {
options = options || {};
this.css('overflow', 'hidden');
var scroll = (function(self) {
return function() {
if (self.data('scroll_stop')) {
return;
}
var li = self.find('li:first');
var t = parseInt(li.css('marginTop')) || 0;
li.animate({
'marginTop': (t - li.outerHeight()) + 'px'
}, options.speed || 'slow', function() {
self.append(li);
li.css('marginTop', t + 'px');
});
};
})(this);
setInterval(scroll, options.delay || 2000);
this.hover(function() {
$(this).data('scroll_stop', true);
}, function() {
$(this).removeData('scroll_stop');
});
};
})(jQuery);</script>