滚动新闻插件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

 

posted @ 2015-09-26 17:32  SophiaLiu  阅读(742)  评论(0)    收藏  举报