专栏首页蚂蚁开源社区【开源解析】一款老虎机抽奖的数字滚动js组件

【开源解析】一款老虎机抽奖的数字滚动js组件

数字滚动组件

最近遇到一个数字模拟老虎机滚动的问题,以前有做过几次。但是都没有对它进行沉淀,这次觉得应该把这个东西沉淀一下,方便日后使用。本组件主要针对移动端面。如果是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[        DISCUZ_CODE_4        ]quot; l2r="1">
    <input type="hidden" value="12345678912" />
</div>
<div class="dataCounter" HALO-NUMBER-SCROLL diffrentiation="1" undreg="xxx[        DISCUZ_CODE_4        ]quot; l2r="0">
    <input type="hidden" value="12345678912" />
</div>

窗口的属性名与定制对象的成员名一致!! 具体使用方式,可以查看DEMO.html页面

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

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:大神神码

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【小程序UI教程】小程序滑动选择tab-view

    用户5997198
  • 【开源游戏/节日】蛋旦很疯狂(新年/元旦专用)

    用户5997198
  • 微信小程序 – 猜拳小游戏源码教程

    3、微信小程序开发工具还处于测试阶段,所以期间也遇到了几点小问题,现在把踩过的坑简单说明如下

    用户5997198
  • JavaScript监控当前cpu使用状况

    也许在你面试的某一天,突然问你一个问题:“如何粗略的计算出当前系统cpu的使用情况?”

    meteoric
  • Jquery前端分页插件pagination使用

    祈澈菇凉
  • SCF: 深度学习之目标检测

    很多小伙伴,可能在使用SCF的时候,需要做一些深度学习的操作,但是SCF能跑起来深度学习么?这是个问题!那么,我们就尝试一下,看看如何让SCF跑起来深度学习!

    Dfounderliu
  • JQuery常用方法总结

    1.json的创建方式 <script> $(function () { //第一种 var my = new Peop...

    用户1055830
  • vps dd安装routeros

    重启之后视你vps服务器的性能,我用ruvds dd的时候大概等了10-20分钟。安装好了之后在控制台里面用vnc或者console可以看到登录界面。默认的账号...

    行 者
  • 浏览器的visibilitychange 事件ie10以下不兼容

    deepcc
  • 全球最大的第一视角视频数据集开源,取自真实生活,还能提升厨艺

    最近,一个有趣的视频数据集开源了,它不仅能助你研究生涯一臂之力,或许还能提升你的……嗯,厨艺。

    量子位

扫码关注云+社区

领取腾讯云代金券