資訊專欄INFORMATION COLUMN
摘要：看下面里面的，，，分別是左上右下的鍵值。這樣我們就可以實現上下左右鍵移動圖片了。以像素為單位返回元素相對于版面或由屬性指定的父坐標的計算左側位置。
今天看了dom的一些知識，鞏固了一下js基礎，突然想到自己想做一個小汽車移動的功能，所以二話不說，先來構思一下：首先我們找一張小汽車的圖片，把它放在頁面中，然后需要用到上下左右鍵交互，所以必須用到js中dom的知識了。
car
我為了讓效果看的更加明顯，把汽車放在了頁面正中間。接下來就要寫js了。首先我們必須明白，要讓圖片移動必須先選中圖片，而且交互要交互在圖片上，有些朋友在這時候可能會想，鍵盤事件一般發生在輸入框之類當中，讓圖片響應鍵盤事件該怎么辦。知識都是一點點理解實踐起來的，所以我們在這里想象一下：我們如果拿到了圖片，在圖片上添加img.onkeyup會有用嗎？這時候圖片是肯定不會響應的，就相當于我不想唱歌，非讓我唱，但是爸爸過來了，爸爸很嚴厲，他讓我唱！我只能唱，所以我們干嘛不加到document上呢。選定document，里面的圖片自然而然就選上了。看下面js：
里面的37，38，39，40分別是左上右下的鍵值。這樣我們就可以實現上下左右鍵移動圖片了。
有一個知識點，就是offset：
offsetTop：以 CSS 像素為單位返回元素上邊框距其 offsetParent 上邊框的距離。
offsetLeft：以 CSS 像素為單位返回元素相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置。
這里最主要的是找準 offsetParent。
其實很簡單，比如我們要計算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent應該是離A元素最近的父元素，并且父元素設置了position：relative或absolute屬性，如果沒有匹配到任何父元素，那么應該以窗口為基準計算元素的offsetTop。
完整代碼如下：
car
有不正確的地方望大家指教，祝大家早日富可敵國，bye~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97702.html
摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在中我們就已經實現。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開始播放 當點擊播放按鈕的時候，播...
摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在中我們就已經實現。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開始播放 當點擊播放按鈕的時候，播...
摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。 轉載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習1-處理用戶輸入 小練習2-日期對象的使用 小練習3：輪播圖 小練習4：輸入提示框 小練習...
摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。 轉載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習1-處理用戶輸入 小練習2-日期對象的使用 小練習3：輪播圖 小練習4：輸入提示框 小練習...
閱讀 904·2021-09-29 09:35
閱讀 1253·2021-09-28 09:36
閱讀 1522·2021-09-24 10:38
閱讀 1066·2021-09-10 11:18
閱讀 631·2019-08-30 15:54
閱讀 2496·2019-08-30 13:22
閱讀 1964·2019-08-30 11:14
閱讀 697·2019-08-29 12:35
