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 定义要使用的转换。可用的过渡是“线性”,其以正常和稳定的速度滚动;以及“缓和”,其随着项目退出滚动边界的边缘而减慢。 示例