html：
<
ul
>
<
li
>
<
dl
class=
"dl01 fina01"
>
<
dd
class=
"dd01"
></
dd
>
<
dd
class=
"dd01"
></
dd
>
<
dd
class=
"dd01"
></
dd
>
</
dl
>
</
li
>
<
li
>
<
dl
class=
"dl02 fina02"
>
<
dd
class=
"dd02"
></
dd
>
<
dd
class=
"dd02"
></
dd
>
<
dd
class=
"dd02"
></
dd
>
</
dl
>
</
li
>
<
li
>
<
dl
class=
"dl03 fina03"
>
<
dd
class=
"dd03"
></
dd
>
<
dd
class=
"dd03"
></
dd
>
<
dd
class=
"dd03"
></
dd
>
</
dl
>
</
li
>
</
ul
>
less：
ul{
display:
block;
margin:
0
auto;
width:
474px;
height:
222px;
overflow:
hidden;
li{
display:
block;
float:
left;
margin-right:
1px;
width:
157px;
height:
222px;
overflow:
hidden;
position:
relative;
}
.dl01{
position:
absolute;
top:
0;
left:
0;
width:
157px;
height:
222px;
.dd01{
display:
block;
width:
157px;
height:
666px;
background:
url(
"../images/prize01.jpg"
)
no-repeat;
background-size:
100%
100%;
}
}
.dl02{
position:
absolute;
top:
0;
left:
0;
width:
157px;
height:
222px;
.dd02{
display:
block;
width:
157px;
height:
666px;
background:
url(
"../images/prize02.jpg"
)
no-repeat;
background-size:
100%
100%;
}
}
.dl03{
position:
absolute;
top:
0;
left:
0;
width:
157px;
height:
222px;
.dd03{
display:
block;
width:
157px;
height:
666px;
background:
url(
"../images/prize03.jpg"
)
no-repeat;
background-size:
100%
100%;
}
}
}
js：
var
FLAG =
false;
var
INDEX =
0;
var
RANDOMNUM;
function
letGo() {
RANDOMNUM =
parseInt(
Math.
random() *
4)
let
num = [-
11.84, -
8.88, -
5.92, -
2.96][
RANDOMNUM];
//第1张券
//-8.88 500quan -5.92 100quan -2.96 free
//第2张券
//-5.92 500quan -2.96 100quan -8.88 free
//第3张券
//-2.96 500quan -8.88 100quan -5.92 free
$(
".fina01").
animate({
"top"
:
'-8.88rem'
},
300,
"linear",
function () {
$(
this).
css(
"top",
0).
animate({
"top"
:
num +
'rem'
},
180,
"linear");
});
$(
".fina02").
animate({
"top"
:
'-8.88rem'
},
500,
"linear",
function () {
$(
this).
css(
"top",
0).
animate({
"top"
:
num +
'rem'
},
180,
"linear");
});
$(
".fina03").
animate({
"top"
:
'-8.88rem'
},
600,
"linear",
function () {
$(
this).
css(
"top",
0).
animate({
"top"
:
num +
'rem'
},
180,
"linear");
});
}
function
reset() {
$(
".fina01").
css({
"top"
:
0
});
$(
".fina02").
css({
"top"
:
0
});
$(
".fina03").
css({
"top"
:
0
});
}
$(
".startBtn").
click(
function () {
if (!
FLAG) {
FLAG =
true;
reset();
letGo();
setTimeout(
function () {
FLAG =
false;
},
200);
INDEX++;
}
});
图片：
效果图：
