在按下不同的按键时，使用HTML/JS在同一帧中显示不同的图像

Question

尝试编码在同一帧中为键盘上的每个键显示不同图像的帧。

即按“Q”和1.png在框架 按“W”和2.png显示在画面会显示

我只使用JS，但我愿意听取建议（将JQuery的是更好？）

感谢您的帮助！

Answer 1

开始通过获取关键事件，看到How to listener the keyboard type text in Javascript?

您可以为图像的<img>标签。每次按下某个键时都要更改img.src。

下面是一个示例：http://codepen.io/anon/pen/XMJjqO?editors=1111 'a'和's'将在200x400和400x400图像之间变化。

HTML

<img id='frame' src='http://lorempixel.com/400/200/'></img> 

JS

var f = document.getElementById('frame'); 
document.onkeypress = function(e) { 
    e = e || window.event; 
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode; 
    if (charCode) { 
     if(String.fromCharCode(charCode) === 'a') { 
     f.src = 'http://lorempixel.com/400/200/'; 
     } else if (String.fromCharCode(charCode) === 's'){ 
      f.src = 'http://lorempixel.com/400/400/'; 
     } 
    } 
};