naciśnięcie klawisza jQuery w lewo/prawo nawigacja

Question

Chcę nadać mojemu suwakowi treści możliwość reagowania na naciśnięcie klawisza (STRZAŁKA W LEWO i klawisz STRZAŁKA W PRAWO). Czytałem o konfliktach między kilkoma przeglądarkami i systemami operacyjnymi.

Użytkownik może poruszać się po treści, gdy znajduje się na globalnej stronie internetowej (treści).

pseudokodzie:

ON Global Document 

IF Key Press LEFT ARROW 

THEN animate #showroom css 'left' -980px 


IF Key Press RIGHT ARROW 

THEN animate #showroom css 'left' +980px 

potrzebne rozwiązanie bez zwrotnicy (przeglądarki OSS) konfliktów.

Answer 1

$("body").keydown(function(e) { 
    if(e.keyCode == 37) { // left 
    $("#showroom").animate({ 
     left: "-=980" 
    }); 
    } 
    else if(e.keyCode == 39) { // right 
    $("#showroom").animate({ 
     left: "+=980" 
    }); 
    } 
}); 

Answer 2

$("body").keydown(function(e){ 
    // left arrow 
    if ((e.keyCode || e.which) == 37) 
    { 
     // do something 
    } 
    // right arrow 
    if ((e.keyCode || e.which) == 39) 
    { 
     // do something 
    } 
}); 

Answer 3

Działa to dobrze dla mnie:

$(document).keypress(function (e){ 
    if(e.keyCode == 37) // left arrow 
    { 
     // your action here, for example 
     $('#buttonPrevious').click(); 
    } 
    else if(e.keyCode == 39) // right arrow 
    { 
     // your action here, for example 
     $('#buttonNext').click(); 
    } 
}); 

Answer 4

Wolę używając tego szablonu:

$(document).keypress(function(e){ 
    switch((e.keyCode ? e.keyCode : e.which)){ 
     //case 13: // Enter 
     //case 27: // Esc 
     //case 32: // Space 
     case 37: // Left Arrow 
      $("#showroom").animate({left: "+=980"}); 
     break; 
     //case 38: // Up Arrow 
     case 39: // Right Arrow 
      $("#showroom").animate({left: "-=980"}); 
     break; 
     //case 40: // Down Arrow 
    } 
}); 

Answer 5

Użycie wyrażenia wymienione funkcje mogą pomóc w utrzymaniu czystszego kod:

function go_left(){console.log('left');} 
function go_up(){console.log('up');} 
function go_right(){console.log('right');} 
function go_down(){console.log('down');} 


$(document).on('keydown',function(e){ 

    var act={37:go_left, 38:go_up, 39:go_right, 40:go_down}; 
    if(act[e.which]) var a=new act[e.which]; 

});