更改键绑定Javascript DIV的CSS背景图像

我使用以下命令在边界内包含一个div。 DIV附加到每个箭头键。 如何更改每个关键点方向的#body的背景图像

<script>
var pane = $('#border'),
box = $('#body'),
w = pane.width() - box.width(),
d = {},
x = 3;

function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
</script>

<div id="border">
<div id="body">
<div class='head'></div>
</div>
</div>

#border{position:relative; width:300px; height:300px; border:2px solid red;}
#body{position:absolute; top:140px; left:140px; width: 70px; height: 70px; background: url('/images/model.png');}
#body .head{width: 70px; height: 25px; top: 0; background: rgba(0,0,0,0.5);}

变量窗格=$（“#边框”），
框=$（“#体”），
w=窗格.width（）-box.width（），
d={}，
x=3；
函数newv（v，a，b）{
var n=parseInt（v，10）-（d[a]？x:0）+（d[b]？x:0）；
返回n<0？0:n>w？w:n；
}
$（窗口）.keydown（函数（e）{d[e.which]=true；}）；
$（window.keyup）（函数（e）{d[e.which]=false；}）；
setInterval（函数（）{
box.css({
左：函数（i，v）{返回newv（v，37，39）；}，
顶部：函数（i，v）{returnnewv（v，38，40）；}
});
}, 20);
#边框{位置：相对；宽度：300px；高度：300px；边框：2px实心红色；}
#正文{位置：绝对；顶部：140px；左侧：140px；宽度：70px；高度：70px；背景：url（'/images/model.png'）；}
#头部{宽度：70px；高度：25px；顶部：0；背景：rgba（0,0,0,0.5）；}

每当触发任何按键/keydown事件时，使用jquery的css方法更改背景图像属性

$('.background').css('background-image','url(images/any_image.png)');

你的情况可能是这样的

$(window).keydown(function(e) { 
    d[e.which] = true; 
    $('#body').css('background-image','url(http://hdlatestwallpapers.com/wp-content/uploads/2013/12/Tom-and-Jerry-Cartoon-Wallpaper.jpg)');
});

不确定你是如何得到这些图像的。如果你能在每一个keydown/keydup上获得随机图像，那么你就可以改变url并拥有不同的背景。keyup事件也是如此