抽奖大转盘效果分享

html部分*此文章为转载内容*

css部分
*{
padding: 0;
margin: 0;
}
.wrapper{
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
}
.wrapper .box{
width: 100%;
height: 100%;
}
.wrapper .box img{
width: 100%;
}
.wrapper #button{
position: absolute;
top: 50%;
left: 50%;
margin-top: -65px;
margin-left: -65px;
width: 130px;
height: 130px;
border-radius: 50%;
}
.wrapper #button img{
position: absolute;
top: -23px;
width: 130px;
}
js实现效果
var pars = {
rotateNum: 8,
body: ‘.wrapper’,
clickCb: clickCbFun,
renderCb: renderCbFun
}

var lottery = new Lottery(pars);
function clickCbFun() {
var random = Math.floor(Math.random() * 360);
lottery.goRotate(random);
}
function renderCbFun(deg) {
var str = ”;
if(deg >= 0 && deg < 45) {
str = ‘二等奖’;
}else if(deg >= 45 && deg < 90 || deg >= 135 && deg < 180 || deg >= 225 && deg < 270 || deg >= 315 && deg < 360) {
str = ‘四等奖’;
}else if(deg >= 90 && deg < 135 || deg >= 270 && deg < 315) {
str = ‘三等奖’;
}else if(deg >= 180 && deg < 225) {
str = ‘一等奖’;
}
alert(‘恭喜你获得’+str);
}
jQuery实现
(function (win, $) { var defaultPar = { rotateNum: 5, body: ‘body’, clickCb: function () {}, renderCb: function () {} } win.Lottery = Lottery; function Lottery(pars) { this.pars =$.extend(true, {}, defaultPar, pars);
this.isDoing = false;
this.init();
}
Lottery.prototype.init = function () {
var _this = this;
// this.rotateAll = this.pars.rotateNum * 360;
$(this.pars.body).on(‘click’, ‘#button’, function () { if(!_this.isDoing) { _this.isDoing = true; _this.pars.clickCb(); } })$(this.pars.body).find(‘.box’).get(0).addEventListener(‘webkitTransitionEnd’, function () {
var deg = $(_this.pars.body).attr(‘data-deg’); _this.pars.renderCb(deg);$(_this.pars.body).find(‘.box’).css({
transform: ‘rotate(’ + deg + ‘deg)’,
transition: ‘none’
})
_this.isDoing = false;
})
}
Lottery.prototype.goRotate = function (deg) {
// var rotateEnd = this.rotateAll + deg;
var rotateEnd = this.pars.rotateNum * 360 + deg;
$(this.pars.body).find(‘.box’).css({ transform: ‘rotate(’ + rotateEnd + ‘deg)’, transition: ‘all 5s’ })$(this.pars.body).attr(‘data-deg’,deg);
}

})(window, $)