68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
(function (w) {
|
|
|
|
/**
|
|
*
|
|
* @param {*} params
|
|
* @param {el: 初始化元素}
|
|
* @param {baseTarget: 默认旋转圈数}
|
|
* @param {delayTime: 结束延迟}
|
|
* @param {count: 奖品个数}
|
|
*/
|
|
|
|
|
|
var luckDraw = function (params) {
|
|
if (!params.el) return console.log('element is none');
|
|
// 保存一份属性
|
|
this.params = params
|
|
|
|
// 初始化属性
|
|
this.el = params.el;
|
|
this.baseTarget = (params.baseTarget || 6) * 360;
|
|
this.delayTime = params.delayTime || 2;
|
|
this.endTarget = 0;
|
|
this.timer = null;
|
|
this.count = params.count || 8;
|
|
|
|
// 计算属性
|
|
this.one = 360 / this.count;
|
|
// 转到中间
|
|
this.deep = this.one / 2;
|
|
}
|
|
|
|
luckDraw.prototype = {
|
|
init: function (params) {
|
|
return new luckDraw(params)
|
|
},
|
|
rotate: function (target, func) {
|
|
if (this.timer) return;
|
|
var random = target || parseInt(Math.random() * (this.count + 1)),
|
|
addTarget = parseInt((random - 1) * this.one + this.deep);
|
|
this.endTarget = addTarget + this.baseTarget + (this.endTarget - this.endTarget % 360);
|
|
this.setCss();
|
|
this.showMessage(function () {
|
|
if (func && typeof func == 'function') func();
|
|
})
|
|
},
|
|
setCss: function () {
|
|
var transformArray = ['', '-ms-', '-webkit-', '-moz-', '-o-'];
|
|
var transitionArray = ['', '-ms-', '-moz-', '-webkit-', '-o-'];
|
|
for (var i = 0; i < transitionArray.length; i++) {
|
|
this.el.style[transitionArray[i] + 'transition'] = transitionArray[i] + 'transform ease ' + this.delayTime + 's';
|
|
}
|
|
for (var i = 0; i < transformArray.length; i++) {
|
|
this.el.style[transformArray[i] + 'transform'] = 'rotate(' + this.endTarget + 'deg) ' + (transformArray[i] == '-ms-' ? '' : 'translateZ(0)');
|
|
}
|
|
},
|
|
showMessage: function (func) {
|
|
this.timer = setTimeout(function () {
|
|
typeof func == 'function' && func();
|
|
this.timer = null;
|
|
}.bind(this), this.delayTime * 1000)
|
|
}
|
|
}
|
|
|
|
luckDraw.init = luckDraw.prototype.init;
|
|
window.luckDraw = luckDraw
|
|
|
|
|
|
})(window); |