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~圖片

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。