├── README.md ├── SyntaxHighlighter ├── Scripts │ ├── clipboard.swf │ ├── shBrushCss.js │ ├── shBrushJScript.js │ ├── shBrushXml.js │ └── shCore.js └── Styles │ └── SyntaxHighlighter.css ├── demos ├── fancy.html └── simple.html ├── index.html ├── jquery.easing.1.3.js ├── jquery.jSlots.js ├── jquery.jSlots.min.js └── jslots.jquery.json /README.md: -------------------------------------------------------------------------------- 1 | # jQuery jSlots 2 | 3 | jSlots is 2k of jQuery slot machine magic. It turns any list (`

About...

dp.SyntaxHighlighter

Version: {V}

http://www.dreamprojections.com/syntaxhighlighter

'+highlighter.div.innerHTML+'

'+cmd.label+'

');} 32 | dp.sh.Utils.FixForBlogger=function(str) 33 | {return(dp.sh.isBloggerMode==true)?str.replace(/|<br\s*\/?>/gi,'\n'):str;} 34 | dp.sh.RegexLib={MultiLineCComments:new RegExp('/\\*[\\s\\S]*?\\*/','gm'),SingleLineCComments:new RegExp('//.*$','gm'),SingleLinePerlComments:new RegExp('#.*$','gm'),DoubleQuotedString:new RegExp('"(?:\\.|(\\\\\\")|[^\\""\\n])*"','g'),SingleQuotedString:new RegExp("'(?:\\.|(\\\\\\')|[^\\''\\n])*'",'g')};dp.sh.Match=function(value,index,css) 35 | {this.value=value;this.index=index;this.length=value.length;this.css=css;} 36 | dp.sh.Highlighter=function() 37 | {this.noGutter=false;this.addControls=true;this.collapse=false;this.tabsToSpaces=true;this.wrapColumn=80;this.showColumns=true;} 38 | dp.sh.Highlighter.SortCallback=function(m1,m2) 39 | {if(m1.indexm2.index) 41 | return 1;else 42 | {if(m1.lengthm2.length) 44 | return 1;} 45 | return 0;} 46 | dp.sh.Highlighter.prototype.CreateElement=function(name) 47 | {var result=document.createElement(name);result.highlighter=this;return result;} 48 | dp.sh.Highlighter.prototype.GetMatches=function(regex,css) 49 | {var index=0;var match=null;while((match=regex.exec(this.code))!=null) 50 | this.matches[this.matches.length]=new dp.sh.Match(match[0],match.index,css);} 51 | dp.sh.Highlighter.prototype.AddBit=function(str,css) 52 | {if(str==null||str.length==0) 53 | return;var span=this.CreateElement('SPAN');str=str.replace(/ /g,' ');str=str.replace(/');if(css!=null) 54 | {if((/br/gi).test(str)) 55 | {var lines=str.split('
');for(var i=0;ic.index)&&(match.index/gi,'\n');var lines=html.split('\n');if(this.addControls==true) 85 | this.bar.appendChild(dp.sh.Toolbar.Create(this));if(this.showColumns) 86 | {var div=this.CreateElement('div');var columns=this.CreateElement('div');var showEvery=10;var i=1;while(i<=150) 87 | {if(i%showEvery==0) 88 | {div.innerHTML+=i;i+=(i+'').length;} 89 | else 90 | {div.innerHTML+='·';i++;}} 91 | columns.className='columns';columns.appendChild(div);this.bar.appendChild(columns);} 92 | for(var i=0,lineIndex=this.firstLine;i0;i++) 102 | {if(Trim(lines[i]).length==0) 103 | continue;var matches=regex.exec(lines[i]);if(matches!=null&&matches.length>0) 104 | min=Math.min(matches[0].length,min);} 105 | if(min>0) 106 | for(var i=0;i 2 | 3 | 4 | 5 | jSlots Slot Machine - Matthew Lein 6 | 7 | 8 | 9 | 10 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 |

195 |

205 | 206 |

207 | 208 | 209 | 210 | 211 | 212 | 245 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /demos/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jSlots Slot Machine - Matthew Lein 6 | 7 | 29 | 30 | 31 | 32 | 33 | 34 |

43 | 44 | 45 | 46 | 47 | 48 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jSlots Slot Machine - Matthew Lein 6 | 7 | 8 | 9 | 10 | 11 | 12 | 196 | 197 | 198 | 199 | 200 | 201 |

202 |

203 | 204 |

jQuery jSlots – Lucky 7's!

205 | 206 |

jSlots is 2k of jQuery slot machine magic. It turns any list (<ol> or <ul>) into a slot machine!

207 | 208 |

209 |

219 | 220 |

221 | 222 |

223 |

224 | 225 |

226 |

Demos

227 |

Super simple basic 3 slot
Fun fancy 7 slot (shown above)

231 |

232 | 233 |

234 | 235 |

Options

236 | 237 |

These are the options, with their default values, and what they do

238 | 239 |

240 | $.jSlots.defaultOptions = {
241 |     number : 3,          // Number: number of slots
242 |     winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED
243 |     spinner : '',        // CSS Selector: element to bind the start event to
244 |     spinEvent : 'click', // String: event to start slots on this event
245 |     onStart : $.noop,    // Function: runs on spin start,
246 |     onEnd : $.noop,      // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
247 |     onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)
248 |     easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.
249 |     time : 7000,         // Number: total time of spin animation
250 |     loops : 6            // Number: times it will spin during the animation
251 | };

252 | 253 |

Usage

254 | 255 |

Attach jQuery (successfully tested down to v1.4.1)

256 | 257 |

258 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

259 | 260 |

Attach jSlots plugin

261 | 262 |

263 | <script src="jquery.jSlots.js" charset="utf-8"></script>

264 | 265 |

Attach easing plugin (optional but HIGHLY recommended for nice animation)

266 | 267 |

268 | <script src="jquery.easing.1.3.js" charset="utf-8"></script>

269 | 270 |

Create a list and an element that will spin the slots

271 | 272 |

273 | <ul class="slot">
274 |     <li>1</li>
275 |     <li>2</li>
276 |     <li>3</li>
277 |     <li>4</li>
278 |     <li>5</li>
279 |     <li>6</li>
280 |     <li>7</li>
281 | </ul>
282 | 
283 | <!-- this button will start the spin -->
284 | <input type="button" id="playBtn" value="play">

285 | 286 |

Target the list and make it a jSlot!

287 | 288 |

289 | <script type="text/javascript" charset="utf-8">
290 | 
291 |     $('.slot').jSlots({
292 |         spinner : '#playBtn',
293 |         winnerNumber : 7
294 |     });
295 | 
296 | </script>

297 | 298 |

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:

299 | 300 |

301 | .jSlots-wrapper {
302 |     overflow: hidden; /* to hide the magic */
303 |     height: 20px; /* whatever the height of your list items are */
304 |     display: inline-block; /* to size width correctly, can use float too, or width*/
305 |     border: 1px solid #999;
306 | }

307 | 308 |

309 | 310 | 311 | 312 | 313 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 363 | 364 | 365 | 366 | 367 | -------------------------------------------------------------------------------- /jquery.easing.1.3.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ 3 | * 4 | * Uses the built in easing capabilities added In jQuery 1.1 5 | * to offer multiple easing options 6 | * 7 | * TERMS OF USE - jQuery Easing 8 | * 9 | * Open source under the BSD License. 10 | * 11 | * Copyright © 2008 George McGinley Smith 12 | * All rights reserved. 13 | * 14 | * Redistribution and use in source and binary forms, with or without modification, 15 | * are permitted provided that the following conditions are met: 16 | * 17 | * Redistributions of source code must retain the above copyright notice, this list of 18 | * conditions and the following disclaimer. 19 | * Redistributions in binary form must reproduce the above copyright notice, this list 20 | * of conditions and the following disclaimer in the documentation and/or other materials 21 | * provided with the distribution. 22 | * 23 | * Neither the name of the author nor the names of contributors may be used to endorse 24 | * or promote products derived from this software without specific prior written permission. 25 | * 26 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 27 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 28 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 29 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 30 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 31 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 32 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 33 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 34 | * OF THE POSSIBILITY OF SUCH DAMAGE. 35 | * 36 | */ 37 | 38 | // t: current time, b: begInnIng value, c: change In value, d: duration 39 | jQuery.easing['jswing'] = jQuery.easing['swing']; 40 | 41 | jQuery.extend( jQuery.easing, 42 | { 43 | def: 'easeOutQuad', 44 | swing: function (x, t, b, c, d) { 45 | //alert(jQuery.easing.default); 46 | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); 47 | }, 48 | easeInQuad: function (x, t, b, c, d) { 49 | return c*(t/=d)*t + b; 50 | }, 51 | easeOutQuad: function (x, t, b, c, d) { 52 | return -c *(t/=d)*(t-2) + b; 53 | }, 54 | easeInOutQuad: function (x, t, b, c, d) { 55 | if ((t/=d/2) < 1) return c/2*t*t + b; 56 | return -c/2 * ((--t)*(t-2) - 1) + b; 57 | }, 58 | easeInCubic: function (x, t, b, c, d) { 59 | return c*(t/=d)*t*t + b; 60 | }, 61 | easeOutCubic: function (x, t, b, c, d) { 62 | return c*((t=t/d-1)*t*t + 1) + b; 63 | }, 64 | easeInOutCubic: function (x, t, b, c, d) { 65 | if ((t/=d/2) < 1) return c/2*t*t*t + b; 66 | return c/2*((t-=2)*t*t + 2) + b; 67 | }, 68 | easeInQuart: function (x, t, b, c, d) { 69 | return c*(t/=d)*t*t*t + b; 70 | }, 71 | easeOutQuart: function (x, t, b, c, d) { 72 | return -c * ((t=t/d-1)*t*t*t - 1) + b; 73 | }, 74 | easeInOutQuart: function (x, t, b, c, d) { 75 | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; 76 | return -c/2 * ((t-=2)*t*t*t - 2) + b; 77 | }, 78 | easeInQuint: function (x, t, b, c, d) { 79 | return c*(t/=d)*t*t*t*t + b; 80 | }, 81 | easeOutQuint: function (x, t, b, c, d) { 82 | return c*((t=t/d-1)*t*t*t*t + 1) + b; 83 | }, 84 | easeInOutQuint: function (x, t, b, c, d) { 85 | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; 86 | return c/2*((t-=2)*t*t*t*t + 2) + b; 87 | }, 88 | easeInSine: function (x, t, b, c, d) { 89 | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; 90 | }, 91 | easeOutSine: function (x, t, b, c, d) { 92 | return c * Math.sin(t/d * (Math.PI/2)) + b; 93 | }, 94 | easeInOutSine: function (x, t, b, c, d) { 95 | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; 96 | }, 97 | easeInExpo: function (x, t, b, c, d) { 98 | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; 99 | }, 100 | easeOutExpo: function (x, t, b, c, d) { 101 | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; 102 | }, 103 | easeInOutExpo: function (x, t, b, c, d) { 104 | if (t==0) return b; 105 | if (t==d) return b+c; 106 | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; 107 | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; 108 | }, 109 | easeInCirc: function (x, t, b, c, d) { 110 | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; 111 | }, 112 | easeOutCirc: function (x, t, b, c, d) { 113 | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; 114 | }, 115 | easeInOutCirc: function (x, t, b, c, d) { 116 | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; 117 | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; 118 | }, 119 | easeInElastic: function (x, t, b, c, d) { 120 | var s=1.70158;var p=0;var a=c; 121 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 122 | if (a < Math.abs(c)) { a=c; var s=p/4; } 123 | else var s = p/(2*Math.PI) * Math.asin (c/a); 124 | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 125 | }, 126 | easeOutElastic: function (x, t, b, c, d) { 127 | var s=1.70158;var p=0;var a=c; 128 | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 129 | if (a < Math.abs(c)) { a=c; var s=p/4; } 130 | else var s = p/(2*Math.PI) * Math.asin (c/a); 131 | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 132 | }, 133 | easeInOutElastic: function (x, t, b, c, d) { 134 | var s=1.70158;var p=0;var a=c; 135 | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); 136 | if (a < Math.abs(c)) { a=c; var s=p/4; } 137 | else var s = p/(2*Math.PI) * Math.asin (c/a); 138 | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; 139 | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; 140 | }, 141 | easeInBack: function (x, t, b, c, d, s) { 142 | if (s == undefined) s = 1.70158; 143 | return c*(t/=d)*t*((s+1)*t - s) + b; 144 | }, 145 | easeOutBack: function (x, t, b, c, d, s) { 146 | if (s == undefined) s = 1.70158; 147 | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 148 | }, 149 | easeInOutBack: function (x, t, b, c, d, s) { 150 | if (s == undefined) s = 1.70158; 151 | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; 152 | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; 153 | }, 154 | easeInBounce: function (x, t, b, c, d) { 155 | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; 156 | }, 157 | easeOutBounce: function (x, t, b, c, d) { 158 | if ((t/=d) < (1/2.75)) { 159 | return c*(7.5625*t*t) + b; 160 | } else if (t < (2/2.75)) { 161 | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 162 | } else if (t < (2.5/2.75)) { 163 | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 164 | } else { 165 | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 166 | } 167 | }, 168 | easeInOutBounce: function (x, t, b, c, d) { 169 | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; 170 | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; 171 | } 172 | }); 173 | 174 | /* 175 | * 176 | * TERMS OF USE - EASING EQUATIONS 177 | * 178 | * Open source under the BSD License. 179 | * 180 | * Copyright © 2001 Robert Penner 181 | * All rights reserved. 182 | * 183 | * Redistribution and use in source and binary forms, with or without modification, 184 | * are permitted provided that the following conditions are met: 185 | * 186 | * Redistributions of source code must retain the above copyright notice, this list of 187 | * conditions and the following disclaimer. 188 | * Redistributions in binary form must reproduce the above copyright notice, this list 189 | * of conditions and the following disclaimer in the documentation and/or other materials 190 | * provided with the distribution. 191 | * 192 | * Neither the name of the author nor the names of contributors may be used to endorse 193 | * or promote products derived from this software without specific prior written permission. 194 | * 195 | * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 196 | * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 197 | * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE 198 | * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, 199 | * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE 200 | * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 201 | * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 202 | * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 203 | * OF THE POSSIBILITY OF SUCH DAMAGE. 204 | * 205 | */ -------------------------------------------------------------------------------- /jquery.jSlots.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery jSlots Plugin 3 | * http://matthewlein.com/jslot/ 4 | * Copyright (c) 2011 Matthew Lein 5 | * Version: 1.0.2 (7/26/2012) 6 | * Dual licensed under the MIT and GPL licenses 7 | * Requires: jQuery v1.4.1 or later 8 | */ 9 | 10 | (function($){ 11 | 12 | $.jSlots = function(el, options){ 13 | 14 | var base = this; 15 | 16 | base.$el = $(el); 17 | base.el = el; 18 | 19 | base.$el.data("jSlots", base); 20 | 21 | base.init = function() { 22 | 23 | base.options = $.extend({},$.jSlots.defaultOptions, options); 24 | 25 | base.setup(); 26 | base.bindEvents(); 27 | 28 | }; 29 | 30 | 31 | // --------------------------------------------------------------------- // 32 | // DEFAULT OPTIONS 33 | // --------------------------------------------------------------------- // 34 | 35 | $.jSlots.defaultOptions = { 36 | number : 3, // Number: number of slots 37 | winnerNumber : 1, // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED 38 | spinner : '', // CSS Selector: element to bind the start event to 39 | spinEvent : 'click', // String: event to start slots on this event 40 | onStart : $.noop, // Function: runs on spin start, 41 | onEnd : $.noop, // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order. 42 | onWin : $.noop, // Function: run on winning number. It is passed (winCount:Number, winners:Array) 43 | easing : 'swing', // String: easing type for final spin 44 | time : 7000, // Number: total time of spin animation 45 | loops : 6 // Number: times it will spin during the animation 46 | }; 47 | 48 | // --------------------------------------------------------------------- // 49 | // HELPERS 50 | // --------------------------------------------------------------------- // 51 | 52 | base.randomRange = function(low, high) { 53 | return Math.floor( Math.random() * (1 + high - low) ) + low; 54 | }; 55 | 56 | // --------------------------------------------------------------------- // 57 | // VARS 58 | // --------------------------------------------------------------------- // 59 | 60 | base.isSpinning = false; 61 | base.spinSpeed = 0; 62 | base.winCount = 0; 63 | base.doneCount = 0; 64 | 65 | base.$liHeight = 0; 66 | base.$liWidth = 0; 67 | 68 | base.winners = []; 69 | base.allSlots = []; 70 | 71 | // --------------------------------------------------------------------- // 72 | // FUNCTIONS 73 | // --------------------------------------------------------------------- // 74 | 75 | 76 | base.setup = function() { 77 | 78 | // set sizes 79 | 80 | var $list = base.$el; 81 | var $li = $list.find('li').first(); 82 | 83 | base.$liHeight = $li.outerHeight(); 84 | base.$liWidth = $li.outerWidth(); 85 | 86 | base.liCount = base.$el.children().length; 87 | 88 | base.listHeight = base.$liHeight * base.liCount; 89 | 90 | base.increment = (base.options.time / base.options.loops) / base.options.loops; 91 | 92 | $list.css('position', 'relative'); 93 | 94 | $li.clone().appendTo($list); 95 | 96 | base.$wrapper = $list.wrap('

').parent(); 97 | 98 | // remove original, so it can be recreated as a Slot 99 | base.$el.remove(); 100 | 101 | // clone lists 102 | for (var i = base.options.number - 1; i >= 0; i--){ 103 | base.allSlots.push( new base.Slot() ); 104 | } 105 | 106 | }; 107 | 108 | base.bindEvents = function() { 109 | $(base.options.spinner).bind(base.options.spinEvent, function(event) { 110 | if (!base.isSpinning) { 111 | base.playSlots(); 112 | } 113 | }); 114 | }; 115 | 116 | // Slot contstructor 117 | base.Slot = function() { 118 | 119 | this.spinSpeed = 0; 120 | this.el = base.$el.clone().appendTo(base.$wrapper)[0]; 121 | this.$el = $(this.el); 122 | this.loopCount = 0; 123 | this.number = 0; 124 | 125 | }; 126 | 127 | 128 | base.Slot.prototype = { 129 | 130 | // do one rotation 131 | spinEm : function() { 132 | 133 | var that = this; 134 | 135 | that.$el 136 | .css( 'top', -base.listHeight ) 137 | .animate( { 'top' : '0px' }, that.spinSpeed, 'linear', function() { 138 | that.lowerSpeed(); 139 | }); 140 | 141 | }, 142 | 143 | lowerSpeed : function() { 144 | 145 | this.spinSpeed += base.increment; 146 | this.loopCount++; 147 | 148 | if ( this.loopCount < base.options.loops ) { 149 | 150 | this.spinEm(); 151 | 152 | } else { 153 | 154 | this.finish(); 155 | 156 | } 157 | }, 158 | 159 | // final rotation 160 | finish : function() { 161 | 162 | var that = this; 163 | 164 | var endNum = base.randomRange( 1, base.liCount ); 165 | 166 | var finalPos = - ( (base.$liHeight * endNum) - base.$liHeight ); 167 | var finalSpeed = ( (this.spinSpeed * 0.5) * (base.liCount) ) / endNum; 168 | 169 | that.$el 170 | .css( 'top', -base.listHeight ) 171 | .animate( {'top': finalPos}, finalSpeed, base.options.easing, function() { 172 | base.checkWinner(endNum, that); 173 | }); 174 | 175 | } 176 | 177 | }; 178 | 179 | base.checkWinner = function(endNum, slot) { 180 | 181 | base.doneCount++; 182 | // set the slot number to whatever it ended on 183 | slot.number = endNum; 184 | 185 | // if its in the winners array 186 | if ( 187 | ( $.isArray( base.options.winnerNumber ) && base.options.winnerNumber.indexOf(endNum) > -1 ) || 188 | endNum === base.options.winnerNumber 189 | ) { 190 | 191 | // its a winner! 192 | base.winCount++; 193 | base.winners.push(slot.$el); 194 | 195 | } 196 | 197 | if (base.doneCount === base.options.number) { 198 | 199 | var finalNumbers = []; 200 | 201 | $.each(base.allSlots, function(index, val) { 202 | finalNumbers[index] = val.number; 203 | }); 204 | 205 | if ( $.isFunction( base.options.onEnd ) ) { 206 | base.options.onEnd(finalNumbers); 207 | } 208 | 209 | if ( base.winCount && $.isFunction(base.options.onWin) ) { 210 | base.options.onWin(base.winCount, base.winners, finalNumbers); 211 | } 212 | base.isSpinning = false; 213 | } 214 | }; 215 | 216 | 217 | base.playSlots = function() { 218 | 219 | base.isSpinning = true; 220 | base.winCount = 0; 221 | base.doneCount = 0; 222 | base.winners = []; 223 | 224 | if ( $.isFunction(base.options.onStart) ) { 225 | base.options.onStart(); 226 | } 227 | 228 | $.each(base.allSlots, function(index, val) { 229 | this.spinSpeed = 0; 230 | this.loopCount = 0; 231 | this.spinEm(); 232 | }); 233 | 234 | }; 235 | 236 | 237 | base.onWin = function() { 238 | if ( $.isFunction(base.options.onWin) ) { 239 | base.options.onWin(); 240 | } 241 | }; 242 | 243 | 244 | // Run initializer 245 | base.init(); 246 | }; 247 | 248 | 249 | // --------------------------------------------------------------------- // 250 | // JQUERY FN 251 | // --------------------------------------------------------------------- // 252 | 253 | $.fn.jSlots = function(options){ 254 | if (this.length) { 255 | return this.each(function(){ 256 | (new $.jSlots(this, options)); 257 | }); 258 | } 259 | }; 260 | 261 | })(jQuery); 262 | -------------------------------------------------------------------------------- /jquery.jSlots.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery jSlots Plugin 3 | * http://matthewlein.com/jslot/ 4 | * Copyright (c) 2011 Matthew Lein 5 | * Version: 1.0.2 (7/26/2012) 6 | * Dual licensed under the MIT and GPL licenses 7 | * Requires: jQuery v1.4.1 or later 8 | */ 9 | 10 | (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-1)||f===d.options.winnerNumber){d.winCount++;d.winners.push(g.$el);}if(d.doneCount===d.options.number){var e=[];a.each(d.allSlots,function(h,i){e[h]=i.number;});if(a.isFunction(d.options.onEnd)){d.options.onEnd(e);}if(d.winCount&&a.isFunction(d.options.onWin)){d.options.onWin(d.winCount,d.winners,e);}d.isSpinning=false;}};d.playSlots=function(){d.isSpinning=true;d.winCount=0;d.doneCount=0;d.winners=[];if(a.isFunction(d.options.onStart)){d.options.onStart();}a.each(d.allSlots,function(e,f){this.spinSpeed=0;this.loopCount=0;this.spinEm();});};d.onWin=function(){if(a.isFunction(d.options.onWin)){d.options.onWin();}};d.init();};a.fn.jSlots=function(b){if(this.length){return this.each(function(){(new a.jSlots(this,b));});}};})(jQuery); -------------------------------------------------------------------------------- /jslots.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jslots", 3 | "title": "jQuery jSlots", 4 | "description": "jSlots is 2k of jQuery slot machine magic. It turns any list (<ol> or <ul>) into a slot machine!", 5 | "keywords": [ 6 | "slots", 7 | "gambling", 8 | "lists", 9 | "fun", 10 | "zany", 11 | "winning" 12 | ], 13 | "version": "1.0.3", 14 | "dependencies": { 15 | "jquery": ">=1.4.1" 16 | }, 17 | "author": { 18 | "name": "Matthew Lein", 19 | "url": "http://matthewlein.com/" 20 | }, 21 | "licenses": [ 22 | { 23 | "type": "MIT", 24 | "url": "http://opensource.org/licenses/MIT" 25 | }, 26 | { 27 | "type": "GPL", 28 | "url": "http://www.gnu.org/licenses/gpl.html" 29 | } 30 | ], 31 | 32 | "bugs": "https://github.com/matthewlein/jQuery-jSlots/issues", 33 | "homepage": "http://matthewlein.com/experiments/slots.html", 34 | "docs": "http://matthewlein.com/experiments/slots.html", 35 | "download": "https://github.com/matthewlein/jQuery-jSlots" 36 | } --------------------------------------------------------------------------------