Question

我有一个div，当你按下x键时，我正在附加一个＆＃39; kick＆＃39;上课。 kick类有一个背景图像，它是一个gif。当您第一次按下x键时，gif加载正常。它第二次加载但看起来有错误，按第三，第四等按键，gif被冻结在一个帧上。您可以在此链接中按x几次测试它： http://politician-flare-66043.bitballoon.com/test2.html

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <style>
    #test{
        background-repeat: no-repeat;
        height: 640px;
        /*0 40 58*/
        position: relative;
        left: 0px;
        top: 0px;
    }
    .image{
        background-image: url('images/sidestepken.png');
        width:9%;
    }
    .kick{
        background-image: url('images/weirdkick.gif');
        width: 100%;
    }
    .first{
        background-image: url('images/sidestepken.png');
        width:9%;
        background-position:0% 0%;
    }
    .second{
        background-image: url('images/sidestepken.png');
        background-position:40% 0%;
        width:9%;
    }
    .third{
        background-image: url('images/sidestepken.png');
        background-position:58% 0%;
        width:9%;
    }

    </style>
</head>
<body>
    <div id="test"></div>

javascript :( stackoverflow忽略了我的js，但这是在脚本标记内：）

document.getElementById('test').className = 'image';
let lefter = 0; 
let uper = 0;
window.addEventListener('keydown',function(e){
    if(e.code === 'KeyX'){
        console.log('test');
        document.getElementById('test').className = 'kick';
        setTimeout(function(){
            document.getElementById('test').className = 'image';
        },2000);

    }
    if(e.code === 'ArrowLeft'){
        lefter -= 10;
        changepos();
    }
    if(e.code === 'ArrowRight'){
        lefter += 10;
        changepos();
    }
})
let counter = 0;
function changepos(){
    counter++;
    document.getElementById('test').style.top = uper + 'px';
    document.getElementById('test').style.left = lefter + 'px';
    if(counter === 1){
        console.log('first');
     document.getElementById('test').className = 'first';
    }
    if(counter === 2){ 
        console.log('second');
     document.getElementById('test').className = 'second';
    }   
    if(counter === 3){
        console.log('third');
     document.getElementById('test').className = 'third';
     counter = 0;
    }
}


</body>
</html>

Javascript：经过一些按键gif＆＃39;崩溃＆/暂停在一个框架上

0 个答案: