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 |
$(‘.w3ci‘).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> |
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 });
时间： 2024-09-30 23:58:18