使用Jquery做的滚动新闻

本文主要是介绍使用Jquery做的滚动新闻，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

滚动新闻代码从是网上找的，自己做了一些修改，特别是新闻比较长时.

<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();});
/*&lt;![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>

 

 

这篇关于使用Jquery做的滚动新闻的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---