今天看了dom的一些知识，巩固了一下js基础，突然想到自己想做一个小汽车移动的功能，所以二话不说，先来构思一下：首先我们找一张小汽车的图片，把它放在页面中，然后需要用到上下左右键交互，所以必须用到js中dom的知识了。
car
img{
width: 200px;
height: 200px;
position: absolute;
top: 300px;
left: 600px;
}
我为了让效果看的更加明显，把汽车放在了页面正中间。接下来就要写js了。首先我们必须明白，要让图片移动必须先选中图片，而且交互要交互在图片上，有些朋友在这时候可能会想，键盘事件一般发生在输入框之类当中，让图片响应键盘事件该怎么办。知识都是一点点理解实践起来的，所以我们在这里想象一下：我们如果拿到了图片，在图片上添加img.onkeyup会有用吗？这时候图片是肯定不会响应的，就相当于我不想唱歌，非让我唱，但是爸爸过来了，爸爸很严厉，他让我唱！我只能唱，所以我们干嘛不加到document上呢。选定document，里面的图片自然而然就选上了。看下面js：
window.onload = function(){
var img = document.getElementsByTagName('img')[0];
document.onkeyup = function(event){
if (event.keyCode==37) {
img.style.left = img.offsetLeft-20+"px";
}else if (event.keyCode==38){
img.style.top = img.offsetTop-20+"px";
}else if (event.keyCode==39){
img.style.left = img.offsetLeft+20+"px";
}else if (event.keyCode==40){
img.style.top = img.offsetTop+20+"px";
}
}
}
里面的37，38，39，40分别是左上右下的键值。这样我们就可以实现上下左右键移动图片了。
有一个知识点，就是offset：
offsetTop：以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。
offsetLeft：以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
这里最主要的是找准 offsetParent。
其实很简单，比如我们要计算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent应该是离A元素最近的父元素，并且父元素设置了position：relative或absolute属性，如果没有匹配到任何父元素，那么应该以窗口为基准计算元素的offsetTop。
完整代码如下：
car
img{
width: 200px;
height: 200px;
position: absolute;
top: 300px;
left: 600px;
}
window.onload = function(){
var img = document.getElementsByTagName('img')[0];
document.onkeyup = function(event){
if (event.keyCode==37) {
img.style.left = img.offsetLeft-20+"px";
}else if (event.keyCode==38){
img.style.top = img.offsetTop-20+"px";
}else if (event.keyCode==39){
img.style.left = img.offsetLeft+20+"px";
}else if (event.keyCode==40){
img.style.top = img.offsetTop+20+"px";
}
}
}
有不正确的地方望大家指教，祝大家早日富可敌国，bye~
