Question

如果在主体上有背景图像的html页面，当在键盘上按下箭头键时，如何移动背景，例如按下左键时背景向右滚动，按下右键时向左滚动

Answer 1

可以使用background-position css属性控制背景图像位置，您可以使用javascript代码设置该属性。

在下面的示例中，jquery用于在按下某个键时触发事件，并且根据按下的箭头键，background-position-x或background-position-y属性以10像素为增量进行调整。

＆＃13;

var initX = 0;
var initY = 0;
$(document).keydown(function(e){
    if(e.keyCode == 38) {//up
      initY += 10;
      document.getElementsByTagName('body')[0].style.backgroundPositionY = initY + "px";
    }
    else if(e.keyCode == 40) {//down
      initY -= 10;
      document.getElementsByTagName('body')[0].style.backgroundPositionY = initY + "px";
    }
    else if(e.keyCode == 37) {//left
      initX += 10;
      document.getElementsByTagName('body')[0].style.backgroundPositionX = initX + "px";
    }
    else if(e.keyCode == 39) {//right
      initX -= 10;
      document.getElementsByTagName('body')[0].style.backgroundPositionX = initX + "px";
    }
});

＆＃13;

body{
    background-image: url("http://grin.hq.nasa.gov/IMAGES/SMALL/GPN-2000-001124.jpg"); /*public domain Image source: http://grin.hq.nasa.gov/BROWSE/apollo17_1.html*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    some content
</body>

＆＃13;

按下箭头键时移动HTML背景

1 个答案: