vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB。vTicker 支持自定义滚动时间、间隔时间、显示个数、滚动方向(向上/向下)、容器高度等等,但它对 HTML 结构有点小“苛刻”——容器里面只能是 ul 标签。不过如果你仅仅是需要一个垂直滚动效果的话,vTicker 仍然是一个很好的选择,毕竟它是如此的小巧方便。
使用方法
1、引入文件
1 |
< script src = "js/jquery.min.js" ></ script > |
2 |
< script src = "js/jquery.vticker.js" ></ script > |
2、HTML
01 |
< div class = "w3ci" > |
02 |
< ul > |
03 |
< li >1、新闻标题</ li > |
04 |
< li >2、新闻标题</ li > |
05 |
< li >3、新闻标题</ li > |
06 |
< li >4、新闻标题</ li > |
07 |
< li >5、新闻标题</ li > |
08 |
< li >6、新闻标题</ li > |
09 |
< li >7、新闻标题</ li > |
10 |
< li >8、新闻标题</ li > |
11 |
</ ul > |
12 |
</ div > |
4、JavaScript
1 |
|
使用方法
1、引入文件
1 |
< script src = "js/jquery.min.js" ></ script > |
2 |
< script src = "js/jquery.vticker.js" ></ script > |
2、HTML
01 |
< div class = "w3ci" > |
02 |
< ul > |
03 |
< li >1、新闻标题</ li > |
04 |
< li >2、新闻标题</ li > |
05 |
< li >3、新闻标题</ li > |
06 |
< li >4、新闻标题</ li > |
07 |
< li >5、新闻标题</ li > |
08 |
< li >6、新闻标题</ li > |
09 |
< li >7、新闻标题</ li > |
10 |
< li >8、新闻标题</ li > |
11 |
</ ul > |
12 |
</ div > |
1 $(function() { 2 $('#scroller').vTicker({ 3 speed: 500, //滚动速度,单位毫秒。 4 pause: 3000, //暂停时间,就是滚动一条之后停留的时间,单位毫秒。 5 showItems: 10, //显示内容的条数。 6 animation: 'fade', //动画效果,默认是fade,淡出。 7 mousePause: true, //鼠标移动到内容上是否暂停滚动,默认为true。 8 height: 235, //滚动内容的高度。 9 direction: 'up' //滚动的方向,默认为up向上,down则为向下滚动。 10 }); 11 });