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
 
           
         
          
 
                     
                     
                     
                     
                     
                     
                     
                     
                    