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