jQuery 拉霸機- jQuery-jSlots

簡單說就是用 jQuery 來做拉霸機，外掛網址
jQuery-jSlots

準備 html

view plaincopy to clipboardprint

1. <ul class="slot">  
2.     <li>1</li>  
3.     <li>2</li>  
4.     <li>3</li>  
5.     <li>4</li>  
6.     <li>5</li>  
7.     <li>6</li>  
8.     <li>7</li>  
9. </ul>  

簡單使用

view plaincopy to clipboardprint

1. $('.slot').jSlots({   
2.     spinner : '#playBtn',   
3.     winnerNumber : 7   
4. });  

可以用的變數

view plaincopy to clipboardprint

1. $.jSlots.defaultOptions = {   
2.     number : 3,          // Number: number of slots   
3.     winnerNumber : 1,    // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED   
4.     spinner : '',        // CSS Selector: element to bind the start event to   
5.     spinEvent : 'click', // String: event to start slots on this event   
6.     onStart : $.noop,    // Function: runs on spin start,   
7.     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.   
8.     onWin : $.noop,      // Function: run on winning number. It is passed (winCount:Number, winners:Array, finalNumbers:Array)   
9.     easing : 'swing',    // String: easing type for final spin. I recommend the easing plugin and easeOutSine, or an easeOut of your choice.   
10.     time : 7000,         // Number: total time of spin animation   
11.     loops : 6            // Number: times it will spin during the animation   
12. };  

這個 plugin 的優點是可以自己訂樣式，所以只要熟 css，想要把拉霸機變得很漂亮也沒問題。