滚动新闻代码从是网上找的,自己做了一些修改,特别是新闻比较长时.
<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滚动新闻 1. 滚动新闻原理:通过定时改变新闻项的显示位置,模拟出滚动效果。可以使用`setTimeout()`或`setInterval()`函数来实现定时任务。 2. 使用`.next()`和`.prev()`:结合`index()`方法,可以实现...
本项目“jQuery实现滚动新闻代码”利用jQuery的灵活性和强大的功能,结合Bootstrap 3框架,创建了一个响应式的新闻滚动效果。Bootstrap 3是Twitter推出的一个开源前端框架,它提供了丰富的预设样式、组件和...
【经典】滚动新闻_Jquery 是一个利用JavaScript库Jquery实现的动态新闻展示方案,它主要关注于创建一种吸引用户注意力的交互式体验。在网页设计中,滚动新闻是一种常见的元素,用于显示最新的更新、公告或者热门资讯...
通过上述知识点,我们可以用jQuery编写一个简洁有效的自动滚动循环滚动新闻展示效果。在实际应用中,可能还需要考虑更多的用户体验和浏览器兼容性问题,例如在不同分辨率的屏幕上展示效果的适配、触屏设备的手势操作...
"单行jQuery循环滚动新闻代码.rar" 这个标题表明这是一个使用jQuery库实现的JavaScript特效,具体是让新闻标题在一行内进行循环滚动。在网页设计中,这种效果通常用于展示最新资讯或者有限空间内的多条信息,以节省...
本项目"jquery垂直向上逐条滚动新闻列表"就是利用jQuery来实现一种动态效果,使新闻列表能以垂直向上的方式逐条滚动,提升用户的浏览体验。这种效果常见于新闻网站或信息展示页面,可以有效地展示大量的信息而不占据...
jQuery animate封装向上滚动插件,使用定时器setInterval调用封装的插件实现滚动公告
标题中的“jQuery左右滚动”指的是使用JavaScript库jQuery实现的一种页面元素水平滚动的特效。这种特效常见于新闻资讯网站、产品展示区域或者轮播图组件,可以让用户方便地浏览横向排列的多个项目。 在jQuery中,...
**jQuery上下滚动插件**是一种常用的前端开发工具,主要用于实现网页元素(如`<li>`列表项)的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见,可以为用户带来动态浏览体验,提升网站的互动性和...
运用jquery实现新闻上下滚动,鼠标覆盖时新闻停留不滚动。
Newstickerpro是基于jQuery的一个强大且灵活的新闻滚动插件,特别适用于创建吸引用户的实时更新展示区,如网站头条、公告或滚动新闻条。 该插件的主要功能和特点包括: 1. **自定义样式**:Newstickerpro允许...
【标题】"jQuery 文字向上滚动"是一种网页动态效果,常用于新闻更新、公告显示或者滚动广告等场景,使得信息能够在有限的空间内持续展示,提高用户的关注度。这种效果通常是通过JavaScript库,特别是jQuery来实现的...
在实际项目中,"jQuery双重滚动特效"常用于产品展示、新闻轮播等场景。通过熟练掌握其原理和实现方式,开发者可以灵活运用到各种网页设计中,提升网页的交互性和观赏性。 总结,jQuery双重滚动特效是基于jQuery库的...
jQuery无缝滚动,也被称为无限滚动或自动轮播,是一种在网页设计中常用的效果,它能够为用户呈现一种连续不断的浏览体验,尤其适用于展示图片、新闻或其他流式内容。这种效果通常应用于网站的首页或者产品展示区域,...
在网页设计中,为了提供更好的用户体验,许多开发者选择使用jQuery无缝滚动效果。这种效果能够使页面内容以平滑、连续的方式展现,为用户带来无中断的浏览体验。jQuery,一个强大的JavaScript库,使得实现这样的功能...
本主题将深入探讨如何使用jQuery实现一个表格自动滚动的效果,类似于新闻滚动条,使得用户无需手动翻页,即可查看表格中的所有内容。 首先,我们需要创建一个包含数据的HTML表格。表格的基本结构如下: ```html ...
2. `setInterval()`: 定时器函数,用于每隔一定时间执行一次特定功能,例如滚动新闻文字。 3. `.animate()`: jQuery的动画方法,用于平滑地改变CSS属性,如改变上移或下移的距离,实现文字的滚动效果。 4. `.stop()`...
本篇文章将详细介绍jQuery循环滚动插件的原理、应用场景以及如何使用。 **1. 插件原理** jQuery循环滚动插件基于jQuery核心库,利用定时器(如`setInterval`)和DOM操作来实现元素的自动滚动效果。通常,它会改变...
高质量的jQuery滚动组件通常会提供丰富的API,允许开发者控制滚动行为,比如设置初始滚动位置、锁定滚动等。同时,组件可能还支持与其他jQuery插件的集成,进一步增强功能。 7. **实际应用** 自定义滚动组件广泛...