Question

我需要使用箭头键在屏幕上移动火柴人图片。我似乎无法找到如何。我已经尝试了所有我找到的东西，但是，它没有用。这是link。

代码：

<script>
     $(document).ready(function(){
        $('#sitting').hide();  
            $(document).keydown(function(e){
                var keyCode = e.keyCode || e.which,
                    arrow = { left:37, up:38, right: 39, down: 40 };
                switch (keyCode {
                case arrow.left:
                    if(!$('#sitting').is(':visible')){
                    $('#img,#sitting').animate({
                        left:'-=60px'
                    },300,"linear");
                    }
                break;
                case arrow.up:
                break;
                case arrow.right:
                    if(!$('#sitting').is(':visible')){
                    $('#img,#sitting').animate({
                        left:'+=60px'
                    },300,"linear");
                    }
                break;
                case arrow.down:
                break;
                }
            });
        $('#sit').click(function(){
            $('#img').fadeToggle(-100,function(){
                $('#sitting').fadeToggle(-100);
            });
        });
    }); 
    </script>
    <button id='left'><<</button><button id='right'>>></button><button id='sit'>Sit Down/Stand up</button><br />
    <img src='/jquery/sprites/spritePerson.png' id='img' style='position: absolute; margin-top: 375px;' /><img id='sitting' src='/jquery/sprites/spriteSitting.png' style='position: fixed; margin-top: 375px;'><img id='tree' src='/jquery/sprites/spriteTree.png' style='position: absolute; margin-top: 100px; margin-left: 700px;' /><br />

Answer 1

认为您的代码有效。只有您错过了switch (keyCode)中的括号代码。

您需要如何解决代码问题。您的一些代码可以进行优化。

等。

在调用animate方法之前，始终使用stop（true）。这会停止动画队列。像$(selector).stop(true).animate({});
为什么你需要制作一个新的箭头对象。你可以直接使用密钥代码;
引用您的选择器，以便它不会一直遍历到获取元素。

请参阅jsfiddle：http://jsfiddle.net/bxAtd/

jQuery - 我正在尝试将箭头键绑定到动态图片上

1 个答案: