首页 > 代码库 > 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.jsjquery.backgroundPosition.jsjquery.spritely.js
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。