成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js 點擊上下左右鍵改變圖片位置

Ilikewhite / 3464人閱讀

摘要：看下面里面的，，，分別是左上右下的鍵值。這樣我們就可以實現(xiàn)上下左右鍵移動圖片了。以像素為單位返回元素相對于版面或由屬性指定的父坐標的計算左側(cè)位置。

今天看了dom的一些知識，鞏固了一下js基礎(chǔ)，突然想到自己想做一個小汽車移動的功能，所以二話不說，先來構(gòu)思一下：首先我們找一張小汽車的圖片，把它放在頁面中，然后需要用到上下左右鍵交互，所以必須用到j(luò)s中dom的知識了。




    
    car
    


    汽車

我為了讓效果看的更加明顯，把汽車放在了頁面正中間。接下來就要寫js了。首先我們必須明白，要讓圖片移動必須先選中圖片，而且交互要交互在圖片上，有些朋友在這時候可能會想，鍵盤事件一般發(fā)生在輸入框之類當中，讓圖片響應(yīng)鍵盤事件該怎么辦。知識都是一點點理解實踐起來的，所以我們在這里想象一下：我們?nèi)绻玫搅藞D片，在圖片上添加img.onkeyup會有用嗎？這時候圖片是肯定不會響應(yīng)的，就相當于我不想唱歌，非讓我唱，但是爸爸過來了，爸爸很嚴厲，他讓我唱！我只能唱，所以我們干嘛不加到document上呢。選定document，里面的圖片自然而然就選上了?？聪旅鎗s：

里面的37，38，39，40分別是左上右下的鍵值。這樣我們就可以實現(xiàn)上下左右鍵移動圖片了。

有一個知識點，就是offset：
offsetTop：以 CSS 像素為單位返回元素上邊框距其 offsetParent 上邊框的距離。
offsetLeft：以 CSS 像素為單位返回元素相對于版面或由 offsetParent 屬性指定的父坐標的計算左側(cè)位置。
這里最主要的是找準 offsetParent。
其實很簡單，比如我們要計算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent應(yīng)該是離A元素最近的父元素，并且父元素設(shè)置了position：relative或absolute屬性，如果沒有匹配到任何父元素，那么應(yīng)該以窗口為基準計算元素的offsetTop。

完整代碼如下：




    
    car
    
    


    汽車

有不正確的地方望大家指教，祝大家早日富可敵國，bye~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97702.html

相關(guān)文章

  • H5打造屬于自己的視頻播放器（JS篇2）

    摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在中我們就已經(jīng)實現(xiàn)。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開始播放 當點擊播放按鈕的時候，播...

    sPeng 評論0 收藏0

  • H5打造屬于自己的視頻播放器（JS篇2）

    摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在中我們就已經(jīng)實現(xiàn)。 回顧 算了不回顧了 showImg(https://segmentfault.com/img/bVBQyx?w=77&h=76);直接搞起，打開JS1中寫的bvd.js 播放視頻 播放按鈕隱藏 視頻開始播放 當點擊播放按鈕的時候，播...

    bang590 評論0 收藏0

  • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

    摘要：獲取下一個元素節(jié)點，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個元素節(jié)點為選擇中，調(diào)用運動框架實現(xiàn)動畫，添加定時器，調(diào)用該函數(shù)，實現(xiàn)自動播放。移出時，開啟定時器，繼續(xù)輪播。輪播間隔時間單位為毫秒，默認為，在內(nèi)部，以下部分進行修改或添加。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

    cnTomato 評論0 收藏0

  • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

    摘要：獲取下一個元素節(jié)點，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個元素節(jié)點為選擇中，調(diào)用運動框架實現(xiàn)動畫，添加定時器，調(diào)用該函數(shù)，實現(xiàn)自動播放。移出時，開啟定時器，繼續(xù)輪播。輪播間隔時間單位為毫秒，默認為，在內(nèi)部，以下部分進行修改或添加。 轉(zhuǎn)載自我的個人博客 歡迎大家批評指正 包括5部分： 小練習(xí)1-處理用戶輸入 小練習(xí)2-日期對象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

    趙春朋 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<