强大的jQuery跑马灯插件

当前位置:主页 > jQuery库 > 布局和界面 > 强大的jQuery跑马灯插件
强大的jQuery跑马灯插件
分享:

    插件介绍

    Web-Ticker是一款功能强大的jQuery跑马灯插件。该跑马灯插件允许你动态修改跑马灯的内容,允许设置移动的过渡动画效果,可以使用图片,可以从RSS中调用内容等。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-21
    阅读:
简要教程

Web-Ticker是一款功能强大的jQuery跑马灯插件。该跑马灯插件允许你动态修改跑马灯的内容,允许设置移动的过渡动画效果,可以使用图片,可以从RSS中调用内容等。

安装

可以通过npm来安装该跑马灯插件。

npm install webticker                  
                

使用方法

在页面中引入jquery和jquery.webticker.min.js文件。

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.webticker.min.js"></script>
                
HTML结构

使用无序列表作为跑马灯的HTML结构。

<ul id="webTicker">
    <li>文本1</li>
    <li>文本2</li>
    <li>文本3</li>
    <li>......</li>
</ul>                  
                
初始化插件

在页面加载完毕之后,可以通过webTicker()方法来初始化该跑马灯插件。

$('#webTicker').webTicker();             
                

配置参数

该跑马灯可用的配置参数如下:

参数 默认值 描述
speed 50 跑马灯移动的速度。单位:像素/秒。
moving true 设置跑马灯的状态是移动还是暂停。
startEmpty true 设置元素是否从不可见的区域开始运动。
duplicate false 跑马灯项是否在必要时复制来移除空白。
hoverpause true 是否在鼠标滑过时暂停跑马灯的运动。
rssurl false RSS的URL地址(需要注意跨域的限制)。
rssfrequency 0 更新RSS的频率,单位分钟。0表示不更新。
updatetype reset 定义更新跑马灯时是只重置新项目,还是跟新所有项目。
transition linear 动画的easing过渡效果。
height '30px' 跑马灯的高度,必须是一个带单位的字符串。
maskleft '' 在左侧作为遮罩层的图片。
maskright '' 在右侧作为遮罩层的图片。
maskwidth 0 定义遮罩层的宽度。

方法

方法 描述
stop 停止跑马灯的运动。
cont 恢复跑马灯的运动。
update 更新跑马灯的内容。
transition 设置跑马灯的easing效果。

Web-Ticker跑马灯插件的github地址为:https://github.com/mazedigital/Web-Ticker

网友评论