jQuery vTicker:垂直滚动展示

[ 作者:笑傲江湖 发布于:2012年-8月-3日 16:10 星期五  分类:百 宝 箱 ]

  介绍一个垂直滚动的jQuery插件,vTicker,小巧玲珑,且各种浏览器兼容的很好,经测试,通吃。而且,每次滚动一条,不管这一条是单行还是多行,插件会自动计算一条的高度。另外,不只是能滚动文字哦,你把文字换成图片也是OK的。点击下面的阅读全文按钮查看演示。
HTML:
<div class="advice_list" id="scroller">
	<ul>
		<li>春花秋月何时了,往事知多少。</li>
		<li>小楼昨夜又东风,故国不堪回首月明中。</li>
		<li>雕栏玉砌应犹在,只是朱颜改。</li>
		<li>问君能有几多愁,恰似一江春水向东流。</li>
	</ul>
</div>
Javascript:
$(function() {
	$('#scroller').vTicker({
	speed: 500,		//滚动速度,单位毫秒。
	pause: 3000,		//暂停时间,就是滚动一条之后停留的时间,单位毫秒。
	showItems: 10,		//显示内容的条数。
	animation: 'fade',	//动画效果,默认是fade,淡出。
	mousePause: true,	//鼠标移动到内容上是否暂停滚动,默认为true。
	height: 235,		//滚动内容的高度。
	direction: 'up'		//滚动的方向,默认为up向上,down则为向下滚动。
	});
});
兼容性:
IE6+/Chrome/Firefox/Opera/Safari全系列通吃。
作者页面:
http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
效果演示:

微信支付宝

标签: CSS jQuery HTML Plugin vTicker

评论6 引用0 浏览7012

信息列表:

楼主

啦啦
2014-02-26 16:27
问一下,那个我想一次往上滚动三条 而不是一条 要怎么设置啊?谢谢啊
笑傲江湖
2014-02-26 17:25
@啦啦:你这个要求仅仅设置这个插件估计搞不定。给你个简单的解决办法,每个li标签里,你可以放三个p元素用来放标题,试试看,应该可行。

楼主

jk
2013-01-28 00:42
实际使用中数据肯定不是硬编码在程序中,假如现在很常见的需求:
(1)默认显示10条数据:
(2)当10条数据显示完了,我要请求服务器,获取新的数据,滚动显示(这是间断的);
(3)或者是每次列表的最前面的项滚动完了(移除该项),我要获取数据在后面添加进列表(添加一项)
这样的话 插件的用处应该就不太大了
我也不知道这插件还有没有其他参数,或者有动态数据的插入拓展
笑傲江湖
2013-01-28 11:07
@jk:动态插入数据没研究过,你得去插件作者网站上去看看有没有相关扩展参数设置。

楼主

代码之美
2013-01-07 16:27
非常感谢,这个插件很不错嘛
笑傲江湖
2013-01-07 17:26
@代码之美:不要客气,好东西要分享。多谢光临。
说点什么:

正文内容:

 




图片博文
小学毕业了