Skip to content

diamont1001/listScroller

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

中奖信息滚动展示模块

在做运营活动页面的过程中,特别是抽奖活动页面,通常会有中奖信息滚动通知的需求,本模块的出现就是为了方便实现该效果。

安装

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()