js组件slotmachine_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

原文：http://www.cnblogs.com/MartinCorner/p/3799896.html