Question

我正试图通过jQuery使用wasd键在屏幕上移动一个圆圈。我有可以在屏幕上移动圆圈的代码，但我也试图在按下它们时点亮按键。我似乎无法让点亮的代码工作......任何建议？一旦用户按下颜色，颜色应该只显示一小段时间。

这是我的jQuery：

$(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('#box').animate({left: "-=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        case 83:
            $('#box').animate({top: "+=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        case 87:
            $('#box').animate({top: "-=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        case 68:
            $('#box').animate({left: "+=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        default:
            break;
    }
});
});

Answer 1

创建一个突出显示功能，其中key是必须高亮的关键，delay必须突出显示的时间。

var highlight = function(key, delay) {
    $('.button.' + key + ' span').css('color', 'red');
    setTimeout(function() {
        $('.button.' + key + ' span').css('color', 'white');
    }, delay);
}

<强> Working demo

Answer 2

您可以这样做：

$("span").css('color','red');

或

$("span").attr("style","color:red;");

另请注意，这将更改所有跨度的颜色，请考虑使用ID或类来选择它们。

Answer 3

我为您制作了一个自定义函数来更改颜色调用changeColor(className)，这是它的工作原理：

function changeColor(spanClass) {
    //Change the pressed key to "red"
    $("div." + spanClass + " span").css("color", "red");

    //After half-second, change it back to "white"
    setTimeout(function() {
        $("div." + spanClass + " span").css("color", "white");
    }, 500);
}

现在，每按一次按钮，传递按下的按钮：

case 65:
    $('#box').animate({left: "-=10px"}, 'fast');
    changeColor("a");
    break;

工作演示：http://jsfiddle.net/kUf5q/1/

Answer 4

WORKING DEMO

  function chnage_bg_color(class_button) {
        $('.button.' + class_button).css('background-color', '#ccc').find('span').css('color','red');
        setTimeout(function () {
            $('.button.' + class_button).css('background-color', '#000').find('span').css('color','#fff');
        }, 100);
    }

Answer 5

工作演示，它很简单，没有额外的方法，也没有在keyup上突出显示。顺便说一下，这会点亮键本身，而不是字符的字体。

http://jsfiddle.net/EaQWd/23/

将ID添加到按钮div：

            <div id="boxW" class="w button"><span>W</span></div>
            <div id="boxA" class="a button"><span>A</span></div>
            <div id="boxS" class="s button"><span>S</span></div>
            <div id="boxD" class="d button"><span>D</span></div>

然后使用这个jquery：

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            case 65:
                $('#box').animate({left: "-=10px"}, 'fast');
                $('#boxA').animate({backgroundColor: "red"}, 'fast');
                break;
            case 83:
                $('#box').animate({top: "+=10px"}, 'fast');
                $('#boxS').animate({backgroundColor: "red"}, 'fast');
                break;
            case 87:
                $('#box').animate({top: "-=10px"}, 'fast');
                $('#boxW').animate({backgroundColor: "red"}, 'fast');
                break;
            case 68:
                $('#box').animate({left: "+=10px"}, 'fast');
                $('#boxD').animate({backgroundColor: "red"}, 'fast');
                break;
            default:
                break;
        }
    });
    $(document).keyup(function(key) {
        switch(parseInt(key.which,10)) {
            case 65:
                $('#boxA').animate({backgroundColor: "black"}, 'fast');
                break;
            case 83:
                $('#boxS').animate({backgroundColor: "black"}, 'fast');
                break;
            case 87:
                $('#boxW').animate({backgroundColor: "black"}, 'fast');
                break;
            case 68:
                $('#boxD').animate({backgroundColor: "black"}, 'fast');
                break;
            default:
                break;
        }
    });
});

另外，必须添加jquery-ui才能使其正常工作。希望这有帮助！

通过jQuery更改keydown上的字体颜色

5 个答案: