Question

我使用以下内容在边框内包含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);}

Answer 1

每当触发任何keypress / keydown事件时，使用jquery的css方法更改background-image属性。

$('.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 / keyup上获得随机图像，那么你可以更改网址并拥有不同的背景。密钥事件也是如此。

更改KEYBIND Javascript DIV的CSS背景图像

1 个答案: