滚动新闻插件vticker

时间：2023-03-08 17:13:32

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> 
 $(function()&nbsp;{

     $('#scroller').vTicker({

     speed:&nbsp;500,        //滚动速度，单位毫秒。

     pause:&nbsp;3000,       //暂停时间，就是滚动一条之后停留的时间，单位毫秒。

     showItems:&nbsp;10,     //显示内容的条数。

     animation:&nbsp;'fade', //动画效果，默认是fade，淡出。

     mousePause:&nbsp;true,  //鼠标移动到内容上是否暂停滚动，默认为true。

     height:&nbsp;235,       //滚动内容的高度。

     direction:&nbsp;'up'        //滚动的方向，默认为up向上，down则为向下滚动。

     });

 });

相关文章