滚动新闻代码从是网上找的,自己做了一些修改,特别是新闻比较长时.
<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>
分享到:
相关推荐
滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片
jQuery实现滚动新闻代码是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件。
单行jQuery循环滚动新闻代码
jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告
通过Jquery写的新闻滚动播放界面,包括单行滚动,多行滚动。
jquery插件实现的垂直向上逐条滚动新闻列表页面。
jQuery实现列表自动滚动循环滚动展示新闻,鼠标悬停时停止滚动并提示,离开后,继续滚动,实现的代码如下,需要的朋友可以看看
运用jquery实现新闻上下滚动,鼠标覆盖时新闻停留不滚动。
jQuery新闻滚动插件Newstickerpro
jquery 表格自动滚动 类似于新闻
基于jQuery的一个无间隔滚动效果,代码简单,可以随意设置每次滚动的行数和停隔时间等,用于在网站首页滚动最新动态等非常实用、好看
这是一款网站上用于滚动实时新闻的jQuery滚动新闻插件。这款jQuery滚动新闻插件十分实用,新闻滚动时带有淡入淡出的效果。并且可以自动播放和暂停新闻的滚动。
jQuery实现新闻列表滚动特效代码
jquery滚动新闻展示效果
jQuery Bootstrap响应式新闻列表文字上下滚动特效
jQuery 新闻文字滚动插件,和走马灯非常相似,可以横向滚动、竖向滚动、自定义滚动速度、区域大小,每一种滚动效果都有代码示例,你甚至可以把它作为一个jQuery教程,新闻滚动在我们平时的应用中很广泛,因此本插件...
jquery-newsticker是一款简单实用的jQuery滚动新闻(news ticker)插件。该滚动新闻插件使用简单,可以设置新闻滚动的速度,时间,动画函数等,并且可以兼容IE8浏览器。
此文主要用Jquery实现滚动新闻,如此少的代码就能实现这个功能真的是不由得感叹Jquery的强大功能。 代码如下: <%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=...
jQuery新闻图片上下轮播滚动代码 jQuery新闻图片上下轮播滚动代码