滚动新闻插件vticker

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()&nbsp;{
 2     $('#scroller').vTicker({
 3     speed:&nbsp;500,        //滚动速度，单位毫秒。
 4     pause:&nbsp;3000,       //暂停时间，就是滚动一条之后停留的时间，单位毫秒。
 5     showItems:&nbsp;10,     //显示内容的条数。
 6     animation:&nbsp;'fade', //动画效果，默认是fade，淡出。
 7     mousePause:&nbsp;true,  //鼠标移动到内容上是否暂停滚动，默认为true。
 8     height:&nbsp;235,       //滚动内容的高度。
 9     direction:&nbsp;'up'        //滚动的方向，默认为up向上，down则为向下滚动。
10     });
11 });

View Code