js 点击上下左右键改变图片位置

今天看了dom的一些知识，巩固了一下js基础，突然想到自己想做一个小汽车移动的功能，所以二话不说，先来构思一下：首先我们找一张小汽车的图片，把它放在页面中，然后需要用到上下左右键交互，所以必须用到js中dom的知识了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>car</title>
    <style>
        img{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 300px;
            left: 600px;
        }
    </style>
</head>
<body>
    <img src="car.jpg" alt="汽车">
</body>
</html>

我为了让效果看的更加明显，把汽车放在了页面正中间。接下来就要写js了。首先我们必须明白，要让图片移动必须先选中图片，而且交互要交互在图片上，有些朋友在这时候可能会想，键盘事件一般发生在输入框之类当中，让图片响应键盘事件该怎么办。知识都是一点点理解实践起来的，所以我们在这里想象一下：我们如果拿到了图片，在图片上添加img.onkeyup会有用吗？这时候图片是肯定不会响应的，就相当于我不想唱歌，非让我唱，但是爸爸过来了，爸爸很严厉，他让我唱！我只能唱，所以我们干嘛不加到document上呢。选定document，里面的图片自然而然就选上了。看下面js：

<script>
        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";
                }
            }
        }
    </script>

里面的37，38，39，40分别是左上右下的键值。这样我们就可以实现上下左右键移动图片了。

有一个知识点，就是offset：
offsetTop：以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。
offsetLeft：以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
这里最主要的是找准 offsetParent。
其实很简单，比如我们要计算A元素的 offsetTop，那么先要找到A元素的offsetParent，A元素的offsetParent应该是离A元素最近的父元素，并且父元素设置了position：relative或absolute属性，如果没有匹配到任何父元素，那么应该以窗口为基准计算元素的offsetTop。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>car</title>
    <style>
        img{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 300px;
            left: 600px;
        }
    </style>
    <script>
        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";
                }
            }
        }
    </script>
</head>
<body>
    <img src="car.jpg" alt="汽车">
</body>
</html>

有不正确的地方望大家指教，祝大家早日富可敌国，bye~

js 点击上下左右键改变图片位置

cheneyg

引用和评论

javascript中apply、call和bind的区别

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具