diff --git a/README.md b/README.md old mode 100644 new mode 100755 index 483bb1f..71e6324 --- a/README.md +++ b/README.md @@ -1,69 +1,87 @@ -# jQuery jSlots - -jSlots is 2k of jQuery slot machine magic. It turns any list (`
You can spin it infinitely, and stop it manually
+ ++<script type="text/javascript" charset="utf-8"> + + $('.slot').jSlots({ + spinner : '#playBtn', + winnerNumber : 7, + infinite : true, + onStart : function (jslot) { + setTimeout(function() { jslot.stop([1, 2, 3, 4, 5, 6, 7]); }, 2000); + } + }); + </script>
Styling is up to you, but jSlots supplies a jSlots-wrapper div around your lists that should get overflow: hidden and a height set on it. Here are some recommended styles:
diff --git a/jquery.easing.1.3.js b/jquery.easing.1.3.js old mode 100644 new mode 100755 diff --git a/jquery.jSlots.js b/jquery.jSlots.js old mode 100644 new mode 100755 index eda376c..cd67768 --- a/jquery.jSlots.js +++ b/jquery.jSlots.js @@ -42,7 +42,10 @@ onWin : $.noop, // Function: run on winning number. It is passed (winCount:Number, winners:Array) easing : 'swing', // String: easing type for final spin time : 7000, // Number: total time of spin animation - loops : 6 // Number: times it will spin during the animation + loops : 6, // Number: times it will spin during the animation (or times it will spin to get to minimumSpeed in infinite mode) + minimumSpeed : 1000, // Number: minimum speed the slot can spin (works only in infinite mode) + infinite : false, // Boolean: if it spins infinitely + endsAt : [] // Array: manually set final numbers }; // --------------------------------------------------------------------- // @@ -87,8 +90,20 @@ base.listHeight = base.$liHeight * base.liCount; - base.increment = (base.options.time / base.options.loops) / base.options.loops; - + // default increment speed + + if (base.isInfinite()) { + + // the slots take options.loops loops to get to its minimum speed + base.increment = base.options.minimumSpeed / (base.options.loops - 1); + + } else { + + // lower speed when number of loops is finite + base.increment = (base.options.time / base.options.loops) / base.options.loops; + + } + $list.css('position', 'relative'); $li.clone().appendTo($list); @@ -103,7 +118,18 @@ base.allSlots.push( new base.Slot() ); } + // set final numbers + if (!$.isEmptyObject(base.options.endsAt)) { + $.each(base.allSlots, function(index, val) { + val.endNum = base.options.endsAt[index]; + val.isSpinning = false; + }); + } }; + + base.isInfinite = function () { + return base.options.infinite; + }; base.bindEvents = function() { $(base.options.spinner).bind(base.options.spinEvent, function(event) { @@ -112,16 +138,39 @@ } }); }; + + base.stop = function (idx) { + + if ($.isArray(idx)) { + + $.each(base.allSlots, function(index, val) { + val.endNum = idx[index]; + val.isSpinning = false; + }); + + } else { + + $.each(base.allSlots, function(index, val) { + if (idx) { + val.endNum = idx; + } + val.isSpinning = false; + }); + + } + }; // Slot contstructor base.Slot = function() { - + this.spinSpeed = 0; this.el = base.$el.clone().appendTo(base.$wrapper)[0]; this.$el = $(this.el); this.loopCount = 0; this.number = 0; - + this.isSpinning = true; + delete this.endNum; + }; @@ -142,10 +191,15 @@ lowerSpeed : function() { - this.spinSpeed += base.increment; - this.loopCount++; + if (!base.isInfinite() || this.loopCount <= base.options.loops) { + + this.spinSpeed += base.increment; + + } - if ( this.loopCount < base.options.loops ) { + this.loopCount++; + + if (this.isSpinning && (base.isInfinite() || this.loopCount < base.options.loops )) { this.spinEm(); @@ -160,8 +214,11 @@ finish : function() { var that = this; - - var endNum = base.randomRange( 1, base.liCount ); + var endNum = base.randomRange( 1, base.liCount ); + + if (this.endNum) { + endNum = this.endNum; + } var finalPos = - ( (base.$liHeight * endNum) - base.$liHeight ); var finalSpeed = ( (this.spinSpeed * 0.5) * (base.liCount) ) / endNum; @@ -169,6 +226,7 @@ that.$el .css( 'top', -base.listHeight ) .animate( {'top': finalPos}, finalSpeed, base.options.easing, function() { + that.isSpinning = false; base.checkWinner(endNum, that); }); @@ -222,12 +280,13 @@ base.winners = []; if ( $.isFunction(base.options.onStart) ) { - base.options.onStart(); + base.options.onStart(base); } $.each(base.allSlots, function(index, val) { this.spinSpeed = 0; this.loopCount = 0; + this.isSpinning = true; this.spinEm(); }); diff --git a/jquery.jSlots.min.js b/jquery.jSlots.min.js old mode 100644 new mode 100755 index 49efa0d..e10eed3 --- a/jquery.jSlots.min.js +++ b/jquery.jSlots.min.js @@ -7,4 +7,4 @@ * Requires: jQuery v1.4.1 or later */ -(function(a){a.jSlots=function(c,b){var d=this;d.$el=a(c);d.el=c;d.$el.data("jSlots",d);d.init=function(){d.options=a.extend({},a.jSlots.defaultOptions,b);d.setup();d.bindEvents();};a.jSlots.defaultOptions={number:3,winnerNumber:1,spinner:"",spinEvent:"click",onStart:a.noop,onEnd:a.noop,onWin:a.noop,easing:"swing",time:7000,loops:6};d.randomRange=function(e,f){return Math.floor(Math.random()*(1+f-e))+e;};d.isSpinning=false;d.spinSpeed=0;d.winCount=0;d.doneCount=0;d.$liHeight=0;d.$liWidth=0;d.winners=[];d.allSlots=[];d.setup=function(){var e=d.$el;var g=e.find("li").first();d.$liHeight=g.outerHeight();d.$liWidth=g.outerWidth();d.liCount=d.$el.children().length;d.listHeight=d.$liHeight*d.liCount;d.increment=(d.options.time/d.options.loops)/d.options.loops;e.css("position","relative");g.clone().appendTo(e);d.$wrapper=e.wrap('').parent();d.$el.remove();for(var f=d.options.number-1;f>=0;f--){d.allSlots.push(new d.Slot());}};d.bindEvents=function(){a(d.options.spinner).bind(d.options.spinEvent,function(e){if(!d.isSpinning){d.playSlots();}});};d.Slot=function(){this.spinSpeed=0;this.el=d.$el.clone().appendTo(d.$wrapper)[0];this.$el=a(this.el);this.loopCount=0;this.number=0;};d.Slot.prototype={spinEm:function(){var e=this;e.$el.css("top",-d.listHeight).animate({top:"0px"},e.spinSpeed,"linear",function(){e.lowerSpeed();});},lowerSpeed:function(){this.spinSpeed+=d.increment;this.loopCount++;if(this.loopCount