1. 写在前面
在一些公司的运营活动中,经常会出现的一个活动类型就是抽奖,而抽奖的活动中,有一种比较常见的抽奖类型就是:转盘抽奖。在前端转盘抽奖中,为了能兼容IE
的各个版本,都是使用的flash
的插件,来做的转盘抽奖,而在本篇中,将给出一个转盘的抽奖插件,只适用于H5
的项目中,或者是说,支持CSS3
的浏览器中。
2. 先来看DEMO
像这种插件,首先还是来看看示例吧:
看了示例之后,如果有兴趣,那么可以继续向后看,如果没有兴趣,那么也可以去其他地方逛逛吧,时间宝贵,要记得节省哦。
3. 使用方法
该插件命名为:Turntable
。
初始化方法如下:
var turntable = new Turntable(options);
其中,options
是一个配置参数,接下来,就来看看options
支持的一些属性和方法:
3.1 options.ele{jQuery}
必须
转盘的旋转指针对应的元素。
3.2 options.gifts{Object}
必选
各奖品对应的位置,以及各奖品的中心点以及范围,这个说起来太过模糊,我们依据前面的示例,来看看各属性的值:
options.gifts = {
"1":{
id : "1",
name : "理财金2000元",
angleCenter : 0,
angleRange : 30,
tips : "恭喜您获得理财金2000元~~"
},
"2":{
id : "2",
name : "理财金1000元",
angleCenter : 60,
angleRange : 30,
tips : "恭喜您获得理财金1000元~~"
},
"3":{
id : "3",
name : "谢谢参与",
angleCenter : 120,
angleRange : 30,
tips : "很遗憾没有能中奖,再试一次吧~"
},
"4":{
id : "4",
name : "京东E卡",
angleCenter : 180,
angleRange : 30,
tips : "恭喜您抽中京东E卡一张~"
},
"5":{
id : "5",
name : "理财金5200元",
angleCenter : 240,
angleRange : 30,
tips : "恭喜您获得理财金5200元~~"
},
"6":{
id : "6",
name : "谢谢参与",
angleCenter : 300,
angleRange : 30,
tips : "很遗憾没有能中奖,再试一次吧~"
}
};
拿上面的这个数据结构体,可以和最前面的示例,进行对比,那么接下来,我们来看看,每结构体中的,各个属性,都代表的什么含义;
"1":{
id : "1",
// 奖品对应的id值,这里的值要与该对象的key值相同。
name : "理财金2000元",
// 奖品的显示名称,这个属性在插件中,不会被使用到。
angleCenter : 0,
// 该奖品在转盘上中心点所对应的角度坐标,最大360
angleRange : 30,
// 该奖品在转盘上的范围,其范围就是,[0-30,0+30]
tips : "恭喜您获得理财金2000元~~"
// 当中了该奖品之后,进行的提示信息
}
其中,tips
属性,不会在插件中使用到,我在上面的示例中,定义该属性是为了能在callback
属性中使用。
至于在callback
如何使用,就看下面callback
中的使用方式吧。
3.5 options.callback{Function}
必须,如果不定义这个方法,那么当转盘停止时,是没有任何反应的。
看一个简单的示例,options.callback
可以如下的方式定义:
//传入两个参数,
//giftId,停止的目标奖品Id,可以通过options.gifts[giftId]查看,中奖的是什么
//json,是一个额外的数据,这个可以自定义,比如是ajax返回的json数据等。
options.callback = function (giftId,json){
var gife = options.gifts[giftId];
// 做一个简单的弹窗提示
alert(gift.tips);
}
这里的callback
,最主要的数据还是json
数据,比如ajax
返回的数据,那么giftId
,也是包含在json
内部的,至于这个json
数据是什么样子的,那就可以看具体的业务了,所以,不管这个转盘的处理是如何处理的,只要你在这个callback
中,做自定义的处理即可。
3.4 options.startAngle{Number}
可选
转盘的初始角度,默认角度为0
,就是指针指向时钟的12
点的角度,如果要修改这个属性的话,那么ele
元素的指针,最好也有个默认的旋转角度,与该属性值相同。
建议不要修改该属性,默认值就好了。
3.5 options.speed{Number}
可选
指针旋转的速度,数值越大,那么旋转速度就越大,默认旋转速度为10
;
3.6 结束
到这里,初始化Turntable
相关的信息,就结束了。
第一次实战演练:DEMO求临幸
Mobile端,可以直接扫码查看:
4. 实例化之后
前面,我们把Turntable
进行了实例化,实例化之后的操作,同样是很重要的,转盘的开始与结束,都是通过这个实例进行说明的。
比如,我们如下的进行了初始化,这里的实例化的参数,都是按照前面示例中的参数来的,具体可以查看前面的示例中的源代码。
var btn = $("#pointer"),
turntable = null,
options = {
ele : btn,
speed : 15,
};
// 奖品的角度列表
options.gifts = {
"1":{
id : "1",
name : "理财金2000元",
angleCenter : 0,
angleRange : 30,
tips : "恭喜您获得理财金2000元~~"
},
"2":{
id : "2",
name : "理财金1000元",
angleCenter : 60,
angleRange : 30,
tips : "恭喜您获得理财金1000元~~"
},
"3":{
id : "3",
name : "谢谢参与",
angleCenter : 120,
angleRange : 30,
tips : "很遗憾没有能中奖,再试一次吧~"
},
"4":{
id : "4",
name : "京东E卡",
angleCenter : 180,
angleRange : 30,
tips : "恭喜您抽中京东E卡一张~"
},
"5":{
id : "5",
name : "理财金5200元",
angleCenter : 240,
angleRange : 30,
tips : "恭喜您获得理财金5200元~~"
},
"6":{
id : "6",
name : "谢谢参与",
angleCenter : 300,
angleRange : 30,
tips : "很遗憾没有能中奖,再试一次吧~"
}
};
options.callback = function(id,json){
var gift = options.gifts[id];
if(gift){
alert(gift.tips);
}else{
alert("网络异常,请稍后再试~~");
}
};
turntable = new Turntable(options);
在接下来的,我们就假设Turntable
的实例化对象是turntable
,接下来就看看,转盘有哪些可以供我们使用的属性和方法吧,这里可以用的实例方法,其实是很少的,就三个:
4.1 turntable.begin
开始转盘,直接调用:
turntable.begin();
这个没什么可说的,用来让转盘转起来的。
4.2 turntable.stop
停止转盘。转盘的停止,是不可以直接就停止的,所以这里的转盘停止,是需要一段时间的,所以才有了前面的callback
的设置,stop
方法的调用与callback
是相同的,如下我们来看一看示例:
turntable.stop(giftId,json);
stop
方法传入两个参数,与options.callback
方法中,传入的参数完全相同。
其中:
1:giftId
,是表示转盘最后要停止的奖品所对应的id
,这个id
必须是options.gifts
中所包含的。
2:json
就是一个自定义的数据了,这里传入什么,在callback
中,就会传入这个数据,所以就看具体的业务了。
4.3 turntable.isStoped
当前转盘的状态,返回值为true/false
,表示转盘是否已经停止了。
var isStop = turntable.isStoped();
// true / false
因为转盘不像其他的插件,当转盘尚未停止时,是不能有其他的操作的,所以,这里给出这个方法,用来判断当前转盘的状态。
5. 结尾
这只是一个插件,拿来分享一下吧,供需要的朋友使用,尤其是在时间比较赶的项目中。
如果您发现文中有描述错误或者不当的地方,请留言指出,不胜感激,谢谢!
本文属于原创文章,如需转载,请注明出处,谢谢!
博主的demo很棒,我这采用了CSS3来实现同样的功能。http://www.nihaoshijie.com.cn/mypro/zhuanpan/index.html
示例有个问题,需要请教博主, options.startAngle 似乎不生效,我有个需求是 :只有奖品在转,指针在 320deg,奖品分十分,不管如何设定 options.startAngle 奖品却始终转不到指针的位置,始终差了40deg 左右。
跪求楼主回复
之前的这个方法,写的不好,后来有过改进,只是一直没有更新上来,刚才又写了个demo,你可以直接试试:http://www.zhangyunling.com/study/2019/20190314/
感谢博主的文章分享,条理清晰,受教了!
经常看污妖王张鑫旭的文章。意外的看到你的!!!然后发现你俩都在阅文集团,然后还是同事。感觉这个圈好小
我也是经常看他的文章的,然后现在可以跟着他学习了,有机会来阅文啊,欢迎欢迎