滚动新闻代码从是网上找的,自己做了一些修改,特别是新闻比较长时.
<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>
?
?