1

wasd キーを使用して jQuery 経由で画面上で円を移動しようとしています。画面上で円を移動できるコードがありますが、キーが押されたときにキーを点灯させようとしています。ライトアップコードが機能しないようです... 何か提案はありますか? ユーザーが色を押すと、色は短時間だけ表示されます。

http://jsfiddle.net/kUf5q/

ここに私の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;
    }
});
});
4

5 に答える 5

1

keyハイライトする必要があるキーとdelayハイライトする必要がある時間の長さであるハイライト関数を作成します。

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

ワーキングデモ

于 2013-08-01T14:28:13.177 に答える
0

動作するデモ。シンプルで、余分なメソッドはなく、キーアップのハイライトも解除されます。ちなみにこれは文字のフォントではなく、キーそのものが光ります。

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

ボタン div に id を追加します。

            <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を追加する必要がありました。お役に立てれば！

于 2013-08-01T14:43:03.397 に答える
0

ワーキングデモ

  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);
    }
于 2013-08-01T14:30:11.500 に答える