Web Ticker 是一个跑马灯 jQuery 插件,允许你在屏幕上无限地滚动项目。它拥有平滑连续的过渡,内容可以变化,包括文本,图像列表甚至自定义样式的项目。 Web Ticker API 也可用于以编程方式控制滚动和内容。
用法
引入文件
<script src="jquery.min.js"></script>
<script src="./path/to/jquery.webticker.min.js"></script>
HTML
<ul id="webTicker">
<li>This List Item will scroll infintely</li>
<li>And this one will follow it</li>
<li>Finally when it goes out of screen, it will queue again at the end</li>
</ul>
JS
$('#webTicker').webTicker();
设置
初始化 Web Ticker 时,你可以传递参数以修改 Web Ticker 的设置。这是完全可选的,用于满足你的特定需求。
设置项 | 描述 | 默认值 |
---|---|---|
speed | 移动速度(以像素每秒为单位) | 50 |
moving | 定义 WebTicker 是否应该以移动状态或暂停状态开始 | true |
startEmpty | 定义元素是否应在可见区域之外开始 | true |
duplicate | 表示如果需要,应该复制项目以删除任何空白 | false |
hoverpause | 如果用户将鼠标悬停在代码上,则暂停动画 | true |
rssurl | RSS Feed 的 URL(注意跨域限制) | false |
rssfrequency | 刷新RSS源所需的时间(以分钟为单位)。 0表示无更新 | 0 |
updatetype | 定义数据更新是否将 reset 代码仅包括新项目或 update 项目 |
reset |
transition | 整个过渡过程中使用 easing 函数 | linear |
height | 代码单元的高度。字符串值需要包括单位 | ’30px’ |
maskleft | 用于左侧重叠遮盖的图像 | ” |
maskright | 用于右侧重叠遮盖的图像 | ” |
maskwidth | 定义遮罩的宽度(用于淡入和淡出) | 0 |
方法
可以使用 web ticker 的元素上的 javaScript 调用方法。下表列出了可用的方法。
方法 | 描述 | 演示 |
---|---|---|
stop | 停止当前位置的自动滚动的元素 | 示例 |
cont | 继续从当前位置滚动元素。 | 示例 |
update | 更新功能支持两种模式“交换”和“重置”,它们在启动代码时相应地设置。交换功能使用数据更新属性来标识列表中的唯一项目。当节点值改变时,使它在相同的位置“交换”。不在“更新”列表中的项目不会删除,而新的将在末尾添加。这个行为可以通过传递最后两个参数,插入 & 去掉 . 布尔值true将指示要分别添加/删除的新项目。 “insert”的默认值为true,而“remove”为false。 | 示例 |
transition | 定义要使用的转换。可用的过渡是“线性”,其以正常和稳定的速度滚动;以及“缓和”,其随着项目退出滚动边界的边缘而减慢。 | 示例 |
2017-01-03