Web Ticker – 无限滚动跑马灯jQuery插件

用法

引入文件

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