list-scroller
v1.1.4
Published
Prize scroll notification.
Downloads
3
Readme
中奖信息滚动展示模块
在做运营活动页面的过程中,特别是抽奖活动页面,通常会有中奖信息滚动通知的需求,本模块的出现就是为了方便实现该效果。
安装
npm install list-scroller
插件引用
本插件依赖zepto/jQuery,zepto需要包含animate模块才行。
如果页面上已有jquery或者zepto(animate),则不用再引入zepto.min.js
传统引用
<script type="text/javascript" src="../src/zepto.min.js"></script>
<script type="text/javascript" src="../src/list-scroller.js"></script>
模块化引用(比如:Webpack)
require('list-scroller');
用法例子
实例可参考test.html
//第一步,初始化插件
ListScroller.init($("#inport-box"), {
duration:800,
interval:3000,
height: "24px",
"font-size": "18px"
});
//第二步,设置展示数据(字符串数组形式)
ListScroller.setData(['diamont1001 抽中iPhone 6 plus', '491441035 抽中iPad mini 2', 'chenjr 抽中1000元现金']);
//第三步,开始滚动
ListScroller.start();
接口介绍
初始化接口
ListScroller.init(handler, options)
@param handler: 滚动显示外框的id或者jquery句柄
@param options: (可选)配置信息
{
"font-size": "12px", //文字字体大小,默认12px
height: "18px", //滚动展示栏高度,默认18px
color: "white", //文字颜色,默认白色
background: "black", //滚动框背影颜色,默认黑色
duration: 800, //滚动时长,默认800ms
interval: 3000 //滚动间隔,默认3000ms
}
数据更新接口
ListScroller.setData(arr)
//支持热更新,数据自动平滑更新
开始滚动
ListScroller.start()
停止滚动
ListScroller.stop()