数字滚动组件

最近遇到一个数字模拟老虎机滚动的问题，以前有做过几次。但是都没有对它进行沉淀，这次觉得应该把这个东西沉淀一下，方便日后使用。本组件主要针对移动端面。如果是PC端可能在低版本浏览器下会出问题。

使用方法

下载本项目的numbers.js。然后在需要的页面中引用本，在需要使用数字滚动的容器元素中添加一个叫HALO-NUMBER-SCROLL的属性值，并在容器内添加<input type="hidden" value="" />做为容器的第一个元素。如下：

<div class="numbers" HALO-NUMBER-SCROLL>
    <input type="hidden" value="103450" />
</div>

简单的用法如下：

<body ontouchstart>
<div class="numbers" HALO-NUMBER-SCROLL>
    <input type="hidden" value="103450" />
</div>
<div class="numbers" HALO-NUMBER-SCROLL>
    <input type="hidden" value="12345678" />
</div>
<script type="text/javascript" src="numberscroller.js"></script>
<script type="text/javascript">
    var NUMBERS=numbers();
    NUMBERS.scroll();
</script>
</body>

定制滚动方式

可以针对具体情况，对数字滚动做定制。

定制可以分成两种形式：

统一定制
单独定制

统一定制

一般在初始化滚动对象时，传入参数对象即可，如下：

var NUMBERS=numbers(
    {
        round:3,//默认三圈
        duration: 1,//默认1s
        direction: 'alternate',//方向，有三个值，up,down,alternate。默认是alternate
        l2r:1,//滚动顺序，如果为1表示 从左到右 如果为0表示 从右到左
        delay: .3,//组之间的时间延迟，默认.3s
        groupNum:2,//默认2个一组
        diffrentiation:1,//差异化滚动，默认是差异化滚动
        undreg:'^xxx', //强制无差异化匹配 ^ooxx 表示开头第3，4为无差异化滚动 xxx$ 表示倒数的后三们为无差异滚动
        numList: [ // 数字列表
          "<img src='http://jdc.jd.com/img/170x170?color=ffffff&text=1'>", 
          "<img src='http://jdc.jd.com/img/170x170?color=ff0000&text=2'>", 
          "<img src='http://jdc.jd.com/img/170x170?color=00ff00&text=3'>", 
          "<img src='http://jdc.jd.com/img/170x170?color=ffff00&text=4'>", 
          "<img src='http://jdc.jd.com/img/170x170?color=cccccc&text=5'>", 
          "<img src='http://jdc.jd.com/img/170x170?color=000000&text=6'>"
        ], 
        numHolder: "<img src='http://jdc.jd.com/img/170x170?color=000000&text=*'>"
    }
);
NUMBERS.scroll();//需要调用scroll方法后才可以触发数字滚动

也可以通过，滚动对象的set方法来后期定制，如下：

var NUMBERS=numbers();
NUMBERS.set(
    {
        round:3,//默认三圈
        duration: 1,//默认1s
        direction: 'alternate',//方向，有三个值，up,down,alternate。默认是alternate
        l2r:1,//滚动顺序，如果为1表示 从左到右 如果为0表示 从右到左
        delay: .3,//组之间的时间延迟，默认.3s
        groupNum:2,//默认2个一组
        diffrentiation:1,//差异化滚动，默认是差异化滚动
        undreg:'^xxx'//强制无差异化匹配 ^ooxx 表示开头第3，4为无差异化滚动 xxx$ 表示倒数的后三们为无差异滚动
    }
);
NUMBERS.scroll();

###单独定制

有时候，一个页面内有多个数字滚动，并且每个滚动的具体定制不同，无法统一通过NUMBERS.set(...)来完成。numberscroller组件可以通过数字滚动容器的属性来完成单独定制。

如下：

<div class="dataCounter" HALO-NUMBER-SCROLL diffrentiation="1" undreg="xxx$" l2r="1">
    <input type="hidden" value="12345678912" />
</div>
<div class="dataCounter" HALO-NUMBER-SCROLL diffrentiation="1" undreg="xxx$" l2r="0">
    <input type="hidden" value="12345678912" />
</div>

窗口的属性名与定制对象的成员名一致！！

具体使用方式，可以查看DEMO.html页面

使用图片，可以查看 images.html

qzmmdsl / numberscroller

数字滚动组件

使用方法

定制滚动方式

统一定制

About

Languages