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

时间 2019-12-08

原文原文链接

今天看了dom的一些知识，巩固了一下js基础，忽然想到本身想作一个小汽车移动的功能，因此二话不说，先来构思一下：首先咱们找一张小汽车的图片，把它放在页面中，而后须要用到上下左右键交互，因此必须用到js中dom的知识了。html

<!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：dom

<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分别是左上右下的键值。这样咱们就能够实现上下左右键移动图片了。code

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

完整代码以下：事件

<!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~图片