简介
vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB。vTicker 支持自定义滚动时间、间隔时间、显示个数、滚动方向(向上/向下)、容器高度等等,但它对 HTML 结构有点小“苛刻”——容器里面只能是 ul 标签。不过如果你仅仅是需要一个垂直滚动效果的话,vTicker 仍然是一个很好的选择,毕竟它是如此的小巧方便。
浏览器兼容
IE6+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
使用方法
1、引入文件
<script src="https://www.dowebok.com/js/jquery.min.js"></script> <script src="https://www.dowebok.com/js/jquery.vticker.js"></script>
2、HTML
<div class="dowebok"> <ul> <li>1、新闻标题</li> <li>2、新闻标题</li> <li>3、新闻标题</li> <li>4、新闻标题</li> <li>5、新闻标题</li> <li>6、新闻标题</li> <li>7、新闻标题</li> <li>8、新闻标题</li> </ul> </div>
4、JavaScript
$('.dowebok').vTicker();
配置
属性/方法 | 类型 | 默认值 | 说明 |
---|---|---|---|
speed | 整数 | 700 | 每次滚动持续时间,单位为毫秒 |
pause | 整数 | 4000 | 滚动间隔,单位为毫秒 |
showItems | 整数 | 3 | 显示多少行 |
animation | 字符串 | ” | 滚动动画,默认为空,可选 ‘fade’,既滚动时首位淡入淡出 |
mousePause | 布尔值 | true | 鼠标悬停是否停止滚动 |
isPaused | 布尔值 | false | 默认是否暂停 |
direction | 字符串 | ‘up’ | 滚动方向,可选 ‘up’ / ‘down’ |
height | 整数 | 0 | 容器高度,默认为 0,即根据 showItems 个数自动计算 |
Github 地址:https://github.com/johnantoni/jquery.vticker
[b2_file link="
百度网盘" name="vTicker – jQuery垂直滚动插件" pass="" code=""]