2014年1月13日 星期一

jQuery 拉霸機- jQuery-jSlots

jqslot

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

準備 html
  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>  

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

可以用的變數
  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,想要把拉霸機變得很漂亮也沒問題。

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...