咱一起来写一个卷轴控件吧

        我们先看一看这个卷轴控件实现了什么。

        它的功能呢很简单：

                1、能根据后台的数据实时的展示出来（我这里的话用了随机数代替，可自行替换）

                2、这里有5个卡片，每个卡片是独立的，当新的数据较原数据大时，卡片从下方顶起，当数据较小时，卡片从上方掉落。

                3、写完后自己看着还蛮像是抽奖的。

        要源码的请点击这里：github地址

        要看效果的去这里：演示地址

接下来呢，我大致说下实现这个的思路：其实需要注意的点不多，思路大概是这样：

        总思路：用5个原先藏好的标签填入新数据，再把原标签顶掉。

        上面看到了吧？而实际上是这样的：

        把超出的隐藏掉，整个就达到我们的效果了。

        1、得有个数据处理器，或者说写一个函数，把一个数据转成一个个位数的数字，用来做卡片单元

        2、得有个机制用于比对新数每一位与旧数的大小关系，并做不同的输出，比如新比旧的大输出1，反之输出0，我这顺便做了点样式调整。

        3、有了上面的判断，还得有一个样式调整与归原，什么意思呢？首先我们一开始有个初始值，我们的卷轴是卡片这样划进划出的吧？那新数替换了旧数之后，实际上新数就变成了旧数，这时候呢，我们是不是又回到了起点（这时候的新数看成是初始值），但这时候的类名都变了，不怕，全部归原后，再重新开始下一个循环卷动。

        4、最后的话呢再设置一个定时器，做循环就好了。

这里就贴一下js的代码吧：

/**
 *  卷轴控件
 *  @author:dorseyCh
 *  @date:2018-09-13
***/
(function(win){

    var Scroll = function(option){
        this.option = option;
    };

    Scroll.prototype = {
        //初始化
        init : function(){
            this.oldData = 900;
            this.newData = 800;
            this.arrOld = [0,0,9,0,0];
            this.arrNew = [0,0,8,0,0];
            this.direction = [];
            this.styleReturn();
        },
        //数据生成器 ———— 配合后台则需要异步接收到数据
        dataGet : function () {
            return Math.floor(Math.random() * 99999);
        },
        //数据处理
        dataSolve : function () {

            var num = this.option.num;
            var newData = this.dataGet(),
                oldData = this.newData;

            this.newData = newData;
            var arrOld = [],arrNew = [];
            for(var i = 0 ; i < num ; i ++) {
                arrOld[num - 1 - i] = (parseInt(oldData) % 10);
                // if(parseInt(newData) % 10 !== parseInt(oldData) % 10){
                arrNew[num - 1 - i] = (parseInt(newData) % 10);
                // }
                newData = Math.floor(newData / 10);
                oldData = Math.floor(oldData / 10);
            }
            this.arrOld = arrOld;
            this.arrNew = arrNew;
            this.oldData = this.newData;
            
        },
        //数据展示
        dataDisplay : function (){
            var _self = this;
            var $li = _self.option.dom.find("li");
            _self.direction = [];

            for(var i = 0 ; i < _self.option.num ; i ++){

                //新数据与旧数据对比，较大时，div-hide瞬移到div-on的下方，反之则上方，同时返回一个数组表示接下来li要移动的方向
                // if(_self.arrNew[i] !== '') {
                    _self.arrOld[i] > _self.arrNew[i] ? 
                    ($li.eq(i).find('.s-hide').attr("class","s-hide s-top"), _self.direction.push('bottom')) : 
                    ($li.eq(i).find('.s-hide').attr("class","s-hide s-bottom"), _self.direction.push('top'));
                // }
                // else{
                //     _self.direction.push('');
                // }
                $li.eq(i).find('.s-on').html(_self.arrOld[i]);
                $li.eq(i).find('.s-hide').html(_self.arrNew[i]);
            }

        },
        //添加动画
        animate : function () {
            var _self = this;           
            var $li = this.option.dom.find('li');
            
            $li.each(function(i){
                $li.eq(i).css("transition", 0.5 * ($li.length - i) + "s").attr("class","s-" + _self.direction[i]);
            });
        },
        //样式归原
        styleReturn : function () {
            var _self = this;
            var $li = _self.option.dom.find("li");
            
            for(var i = 0 ; i < _self.option.num ; i ++){
                $li.eq(i).find('.s-on').html(_self.arrNew[i]);
                $li.eq(i).find('.s-hide').html(_self.arrOld[i]);
            }

            $li.css("transition","").attr('class','');
            $li.find(".s-on").attr("class","s-on"),
            $li.find(".s-hide").attr("class","s-hide s-bottom");
            
        },
        run : function () {
            var _self = this;
            _self.init();
            
            setInterval(function(){
                //这里暂时想不到更好的办法，先勉强这样
                _self.styleReturn();    //数据还原
                setTimeout(function(){
                    _self.dataSolve();      //数据处理
                    _self.dataDisplay();    //数据展示
                    _self.animate();
                },100);
            },_self.option.delay);
        }
    }

    win.Scroll = Scroll;

})(window);