怎样用键盘来控制图片在网页上移动

我们用JavaScript语言来实现这个功能，通过制作这个小案例，我们可以掌握JavaScript语言中的键盘事件和switch语句，下面我们来看看这个功能是如何实现的？具体步骤如下：

工具/环境

方法/步骤

1

我们为网页做个简单的布局，打开sublime输入html，嵌入图片链接，并为图片取个id名imgid。


2

在body标签下面嵌入script标签，在script标签对里面可以书写JavaScript代码，如图所示

3

用getElementById方法获取图片的id，为之后给图片添加属性做准备，代码可以这样来写tp=document.getElementById('imgid')

4

为document对象添加一个onkeydown键盘事件，通过这个事件我们可以监控键盘，添加方法：document.onkeydown=function(event){}

5

键盘的每一个按键都有一个键盘码，我们可以通过keyCode来获取键盘码，然后通过switch判断语句来执行某个行为。


6

比如当我们按下键盘向左的方向键时，让图片向左移动10px。
我们可以先获取这个方向键的键码38，通过switch语句来判断，然后修改图片位置属性。


7

我们可以用同样的方法，通过四个方向建来控制图片上下左右的移动，可以看出只要我们可以获取到键盘码，我们可以通过键盘上的任何一个键，来控制图片的移动 。


教程结束。

注意事项