前端老虎機開發總結
阿新 • • 發佈:2018-11-10
最近一直在做動畫相關的東西,前段時間做了一個刮刮卡的,現在又做了一個老虎機的抽獎,都是之前沒接觸過的,現在總結一下老虎機的開發吧
點選搖獎,然後三個依次的轉動。我電腦上沒有生產gif的工具 想看效果 開啟 此連結 檢視效果
1.首先頁面先載入jquery和jquery的外掛easing.js
jquery.easing.js連結地址 jquery版本連結地址
2.為jquery擴充套件一個方法,作用是讓三列依次滾動,並且依次停止 ,程式碼 如下:
var isBegin = false; jQuery.fn.extend({ slots: function (b, c, d) { if (isBegin) { return false } isBegin = true; $(this).css("backgroundPositionY", 0); $(this).each(function(e){ setTimeout(()=>{ $(this).animate({ backgroundPositionY: (((b * 50) - (b * c[e])) / 150)+"rem" },{ duration: 5000 + e * 1000, easing: "easeInOutCirc", complete: function () { if (e == 2) { isBegin = false; d() } } }) },e*100) }) } });
3. 如何使用 :使用起來很方便,比如我給搖獎新增點選事件,點選的回撥裡執行老虎機轉動
$("body").on("click",".isBtnNumber",function(){
$(".swp-item").slots(lhjHeight,r,function(){
//停止轉動的回撥
})
})
說明:老虎機內部轉動的部分,每一列的樣式名字都叫.swp-item 所以執行slots方法之後,需要傳遞三個引數,第一個是轉動每一個格子的大小,即可視區域的高度,第二個引數r代表轉動停止時,三列每列停止的位置,是一個數組例如["0.5","0.5","0.5"]、["2","2","2"]、["-1","-1","-1"],、["-2.5","-2.5","-2.5"],、["-4","-4","-4"],等,這是步長,三個數相同,說明步長相同,停的位置就相同
結束。