版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40028324/article/details/83111437
最近一直在做动画相关的东西,前段时间做了一个刮刮卡的,现在又做了一个老虎机的抽奖,都是之前没接触过的,现在总结一下老虎机的开发吧
点击摇奖,然后三个依次的转动。我电脑上没有生产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"],等,这是步长,三个数相同,说明步长相同,停的位置就相同
结束。