SlotMachine

//            SlotMachine
            var goButton = $("#go_button");
            var completed = 0,
                imgHeight = 776,
                posArr = [
                    0, //4.4
                    194, //12.5
                    194*2, //38.1
                    194*3
                ];

            window.setTimeout(function(){
                    go();
                },600);

            $.addPressListener(goButton,
                 {
                     "onPressEnd": function (event)
                     {
                         go();
                     }
                 });

            function go(){
                document.body.style.pointerEvents = "none";
                a.start();
                b.start();
                c.start();
                $(‘#text‘).style.webkitTransition = "opacity 1s";
                $(‘#text‘).style.opacity = "0";
                disableControl()

                x = window.setInterval(function() {
                    if(a.speed >= a.maxSpeed && b.speed >= b.maxSpeed && c.speed >= c.maxSpeed) {
                        enableControl();
                        window.clearInterval(x);
                    }
                }, 100);

                 window.setTimeout(function(){
                    a.stop();
                    b.stop();
                    c.stop();
                     window.setTimeout(function(){
                        $(‘#text‘).style.webkitTransition = "opacity 1s";
                        $(‘#text‘).style.opacity = "1";
                        document.body.style.pointerEvents = "auto";
                     },2500);
                 },3500);
            }

            function enableControl() {
                J(‘#go_button‘).attr("disabled", false);
            }

            function disableControl() {
                J(‘#go_button‘).attr("disabled", true);
            }

            //create slot objects
            var a = new Slot(‘#machine1‘, 70, 3.5),
                b = new Slot(‘#machine2‘, 65, 3),
                c = new Slot(‘#machine3‘, 70, 4);

            function Slot(el, max, step) {
                this.speed = 0; //speed of the slot at any point of time
                this.step = step; //speed will increase at this rate
                this.si = null; //holds setInterval object for the given slot
                this.el = el; //dom element of the slot
                this.maxSpeed = max; //max speed this slot can have
                this.pos = null; //final position of the slot	

                J(el).pan({
                    fps:30,
                    dir:‘down‘
                });
                J(el).spStop();
            }

            //start
            Slot.prototype.start = function() {
                var _this = this;
//                J(_this.el)[0].style.backgroundImage = "url(../images/reel_blur.png)";
                J(_this.el).spStart();
                _this.si = window.setInterval(function() {
                    if(_this.speed < _this.maxSpeed) {
                        _this.speed += _this.step;
                        J(_this.el).spSpeed(_this.speed);
                    }
                }, 100);
            };

            //stop
            Slot.prototype.stop = function() {
                var _this = this,
                    limit = 15;
                clearInterval(_this.si);
                _this.si = window.setInterval(function() {
                    if(_this.speed > limit) {
                        _this.speed -= _this.step;
                        J(_this.el).spSpeed(_this.speed);
                    }
                    if(_this.speed <= limit) {
                        _this.finalPos(_this.el);
                        J(_this.el).spSpeed(0);
                        J(_this.el).spStop();
                        clearInterval(_this.si);
                        J(_this.el).removeClass(‘motion‘);
                        _this.speed = 0;
                    }
                }, 100);
            };

            //final Position
            Slot.prototype.finalPos = function() {
                var el = this.el,
                    el_id,
                    pos,
                    posMin = 2000000000,
                    best,
                    bgPos,
                    i,
                    j,
                    k;

                el_id = J(el).attr(‘id‘);
                //pos = J(el).css(‘background-position‘); //for some unknown reason, this does not work in IE
                pos = document.getElementById(el_id).style.backgroundPosition;
                pos = pos.split(‘ ‘)[1];
                pos = parseInt(pos, 10);

                for(i = 0; i < posArr.length; i++) {
                    for(j = 0;;j++) {
                        k = posArr[i] + (imgHeight * j);
                        if(k > pos) {
                            if((k - pos) < posMin) {
                                posMin = k - pos;
                                best = k;
                                this.pos = posArr[i]; //update the final position of the slot
                            }
                            break;
                        }
                    }
                }

            var number =  Math.floor(best / imgHeight);
                best = number * imgHeight + imgHeight / 2;//fixed position

                bgPos = "0 " + best + "px";

                J(el).animate({
                    backgroundPosition:"(" + bgPos + ")"
                }, {
                    duration: 1000,
                    complete: function() {
                        completed ++;
                    }
                });
            };

#SlotMachine-background
{
    position:absolute;
    left: 98px;
    top: 223px;
    width: 734px;
    height: 442px;
    background-image: url(../images/SlotMachine-background.98-223.png);
    background-size: 734px 442px;
    background-repeat: no-repeat;
}
#go_button{
    width: 44px;
    height: 220px;
    left: 678px;
    top: 120px;
    position: absolute;
}
#machine1, #machine2, #machine3{
    position: absolute;
    width: 148px;
    height: 194px;
}
#machine1{
    background-image: url(../images/reel_normal-1.png);
    left: 137px;
    top: 127px;
}
#machine2{
    background-image: url(../images/reel_normal-2.png);
    left: 314px;
    top: 127px;
}
#machine3{
    background-image: url(../images/reel_normal-3.png);
    left: 490px;
    top: 127px;

}
#text
{
    position:absolute;
    left: 278px;
    top: 488px;
    width: 419px;
    height: 37px;
    background-image: url(../images/text.278-488.png);
    background-size: 419px 37px;
    background-repeat: no-repeat;
    opacity: 0;
}

#title-text
{
    position:absolute;
    left: 230px;
    top: 269px;
    width: 497px;
    height: 60px;
    background-image: url(../images/title-text.230-269.png);
    background-size: 497px 60px;
    background-repeat: no-repeat;
}

#paper-pop-up
{
    background-image: url(../../_/images/paper-list.png);
    background-position: center;
}

#paper-pop-up >.close-button
{
    position:absolute;
    left: 945px;
    top: 85px;
    width: 42px;
    height: 42px;
    opacity: 0;
}

　　用到的框架：

jquery-1.6.1.min.js
jquery.backgroundPosition.js
jquery.spritely.js

SlotMachine,布布扣,bubuko.com