摇奖机效果

老虎机效果

• 我的项目中用的是0-9的图片，所以用容器包起来，如果直接用数字原理一样

1. 直接在4个数字容器摆放0-9+0共11个图片容器

var turn = function(config){
    var _this = this;
    var i = 0;
  /*因为我用的rem，所以采用这种方法*/
    var height = "2.25";
    this.childrenList = $(config.dom).children();
  /*拿到子容器长度*/
    this.childrenListLen = $(config.dom).children().length;
  /*拿到子容器的高度*/
    this.childrenH = $(config.dom).children().eq(0).height();
  /*用interval做，所以要一个这样的时间，而且可以调快慢*/
    this.speed = config.speed;  // 间隔时间 ms 一定要大于动画时间
    this.duration = config.duration;    // 动画时间 ms
    this.start = function(){
        i++;
        if (i == _this.childrenListLen) {
            i = 1;
            $(config.dom).css({
                '-webkit-transform': 'translate3d(0, 0px, 0)', 
                'transform': 'translate3d(0, 0px, 0)',
                '-webkit-transition-duration': '0s',
                'transition-duration': '0s'
            });
        }else{
            $(config.dom).css({
                '-webkit-transform': 'translate3d(0, -'+ i*height +'rem, 0)', 
                'transform': 'translate3d(0, -'+ i*height +'rem, 0)',
                '-webkit-transition-duration': ''+ _this.duration +'ms',
                'transition-duration': ''+ _this.duration +'ms'
            });
        }
        _this.timer = setTimeout(arguments.callee, _this.speed);
    };
    this.stop = function(){
        clearTimeout(_this.timer);
        _this.timer = null;
        i = "";
  /*这里我用传入的参数做停止的位置，因为后台传数据过来，就这样定位*/
        $(config.dom).css({
            '-webkit-transform': 'translate3d(0, -'+config.index*height+'rem, 0)', 
            'transform': 'translate3d(0, -'+config.index*height+'rem, 0)',
            '-webkit-transition-duration': '0ms',
            'transition-duration': '0ms'
        });
    };
}
// 滚动文字
var allNum = {
    flag: false, // 判断是否按下再摇一次
    isStop: true,
    // 预留对象
    numObj1: null,
    numObj2: null,
    numObj3: null,
    numObj4: null,
  /*预留配置数组*/
    config: [],
  /*这是四个数字最外层容器*/
    ulList: ["#num1_container","#num2_container","#num3_container","#num4_container"]
};
// 初始化4个数字
function startAll(callback){
    for(var i = 0; i < 4; i++){
        // 配置数组
        allNum.config.push({
            "dom": allNum.ulList[i],
            "speed": 80,
            "duration": 100,
            "index": 0
        });
    }
    for(var j = 0; j < 4; j++){
      // 配置对象
        allNum["numObj"+(+j+1)] = new turn(allNum.config[j]);
        (function(j){
      // 造成一个接一个缓动效果，注释掉就是同时动
            setTimeout(function(){
                allNum["numObj"+(+j+1)].start();
                if(j===3){
                    if(callback && typeof callback == "function"){
                        callback();
                    }
                }
            },j*300);
        })(j);
    }
    allNum.isStop = false;
}
// 全部停止 必须先动起来才能停止
function allStop(callback){
    // 数据拿回来后设置 index 默认中奖 TODO
    for(var j = 0; j < 4; j++){
        (function(j){
        // 与上面同理
            setTimeout(function(){
                allNum["numObj"+(+j+1)].stop();
                if(j === 3){
                    allNum.isStop = true;
                    if(callback && typeof callback == "function"){
                        callback();
                    }
                }
            },j*300);
        })(j);
    }
}