前端老虎机开发总结

最近一直在做动画相关的东西,前段时间做了一个刮刮卡的,现在又做了一个老虎机的抽奖,都是之前没接触过的,现在总结一下老虎机的开发吧

 

 前端老虎机开发总结_第1张图片

 点击摇奖,然后三个依次的转动。我电脑上没有生产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"],等,这是步长,三个数相同,说明步长相同,停的位置就相同

 结束。

 

 

你可能感兴趣的:(项目中遇到的小问题,有用的代码总结,前端--基础)