我正在制作一个彗星熄灭的简单动画。
这是彗星本身:
var cometScene = function(){
var b = document.createElement('div');
b.id = 'cometio';
var cometImage = document.createElement('img');
cometImage.setAttribute('src', 'images/comet1.png');
b.appendChild(cometImage);
document.getElementById('wrap').appendChild(b);
}
以下是此举:
function cometMove(){
var comet = document.getElementById('cometio');
var pos = 0;
var interval = setInterval(scene, 3);
function scene(){
if (pos === 1000){
clearInterval(interval);
} else {
pos++;
comet.style.top = pos + 'px';
comet.style.left = pos + 'px';
}
}
}
但问题是它只发生一次然后我必须刷新页面再次运行动画。我在这里做错了什么?
答案 0 :(得分:1)
我必须刷新页面才能再次运行动画
if (pos === 1000){
clearInterval(interval); /* you have stopped animation here */
}
要重新运行或继续运行,可能只需重置彗星的位置:
if (pos === 1000){
pos = 0;
}