我正在制作轮盘赌游戏,但我遇到了一个问题,即我的“动画”(或你所说的)只能玩一次.我没有这么多javascript的经验,也不知道如何解决我的问题.
var img = document.querySelector('#ball');
ball.addEventListener('click',onClick,false);
function onClick() {
this.removeAttribute('style');
var deg = 1080;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
'style',css
);
}.roulette{
padding-top: 5em;
padding-left: 5em;
}
.roulette img{
position: absolute;
height: 50em;
}
.wheel{
}
.ball{
z-index: 1;
}
.border{
z-index: 1;
}
#ball {
-webkit-transition: -webkit-transform 4s ease-out;
z-index: 1;
} 最佳答案
您必须在每次运行时更改度数.如…
var img = document.querySelector('#ball');
ball.addEventListener('click',false);
var deg = 0;
function onClick() {
this.removeAttribute('style');
deg += 1080;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute(
'style',css
);
}.roulette{
padding-top: 5em;
padding-left: 5em;
}
.roulette img{
position: absolute;
height: 50em;
}
.wheel{
}
.ball{
z-index: 1;
}
.border{
z-index: 1;
}
#ball {
-webkit-transition: -webkit-transform 4s ease-out;
z-index: 1;
}var img = document.querySelector('#ball');
ball.addEventListener('click',false);
function onClick() {
that = this;
this.removeAttribute('style');
setTimeout(function() {
var css = '-webkit-transform: rotate(1080deg);';
that.setAttribute(
'style',css
);
},0);
}.roulette {
padding-top: 5em;
padding-left: 5em;
}
.roulette img {
position: absolute;
height: 50em;
}
.wheel {}
.ball {
z-index: 1;
}
.border {
z-index: 1;
}
#ball {
-webkit-transition: -webkit-transform 4s ease-out;
z-index: 1;
}