html 图片左右键切换,js 点击上下左右键改变图片位置

今天看了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~