用 js 實現鍵盤控制圖片移動的事例
期末測驗抽中了一道這個樣的的標題問題，因為是測驗時候有些不敷，一些細節沒有做好于是回來從頭完美了一遍這里就分享給大師了（固然仍是很簡單。。。是一些根本常識的應用）
東西/原料
- 電腦
- sublime
方式/步調
- 1
這里就介紹一些 這個頁面的功能，本家兒如果實此刻 方框（div）內，由鍵盤自由的節制移動圖片；（方框就是規模）；然后有三個功能鍵，感化大師看圖應該都可以大白；
下圖是 頁面 架構；（圖片大師可以本身籌辦，路徑沒錯圖片可以肆意換的）
- 2
之后就是 css 樣式了；邊框 ，位置 ，之類的都比力簡單，就不復述了；關頭是
定位 position ；img 的定位如果相對它的的 父元素 絕對定位；（如許在節制移動的時辰才會正常）
- 3
然后就是 js 部門 ，先是獲取 div img 和 button 對象；
之后設置 一個 敲擊 鍵盤觸發的事務；獲取 d2 的 寬和高 （外部的 left 和 top 是為了以防要用 ，其實可以不獲取的），獲取 img 的 left 和 top ，這是節制移動的關頭，img 的寬和高 是為了后面的限制在邊框；
- 4
以一個判定做詮釋，39 是右偏向鍵 ，點擊這個的時辰判定 img 的位置是不是已經貼到有邊框 （也就是 d2 的寬 減去 img 的寬，一些數字添加是為了閃現完全不碰著邊框），沒有就是 節制 img 的 left 增添，達到就是 獲取 它可以移動的 最年夜數值（d2width - oimgwidth）然后付與；
圖二是移動最年夜距離的獲取示意圖
- 5
之后我們設置 三個功能鍵，這就需要 h5 web 儲存的常識，這里只是簡單的 用 localstorage 記住了 img 的left 和 top；點擊 but1 記住 ，點擊but2 付與；點解 but3 恢復初始（這里直接賦值了，偷懶了。。。）
注重事項
- 小我進修經驗，僅作分享；
- 發表于 2018-07-06 00:00
- 閱讀 ( 854 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章