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 =
) { 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).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);
(
t
h
i
s
.
p
a
r
s
.
b
o
d
y
)
.
a
t
t
r
(
‘
d
a
t
a
−
d
e
g
′
)
;
t
h
i
s
.
p
a
r
s
.
r
e
n
d
e
r
C
b
(
d
e
g
)
;
(_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:‘all5s′)
(
t
h
i
s
.
p
a
r
s
.
b
o
d
y
)
.
f
i
n
d
(
‘
.
b
o
x
′
)
.
c
s
s
(
t
r
a
n
s
f
o
r
m
:
‘
r
o
t
a
t
e
(
′
+
r
o
t
a
t
e
E
n
d
+
‘
d
e
g
)
′
,
t
r
a
n
s
i
t
i
o
n
:
‘
a
l
l
5
s
′
)
(this.pars.body).attr(‘data-deg’,deg);
}
})(window, $)
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
