滚动新闻插件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() {
 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 });

View Code

 

转载于:https://www.cnblogs.com/liuyanxia/p/4841015.html