介绍一个垂直滚动的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/
效果演示:
2014-02-26 16:27