js鍵盤方向鍵實現盒子移動

阿新 • • 發佈：2019-01-18

<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background: red;
            position:absolute;
            left:100px;
            top:100px;
            transition: 0.1s;
        }
    </style 
>
    <script>
                window.onload = function(){
            var oDiv = document.getElementById("div1");
            var left = false;
            var right = false;
            var top = false;
            var bottom = false;
            document.onkeydown = function(ev){
                var  
oEvent = ev || event;
                var keyCode = oEvent.keyCode;
                switch(keyCode){
                    case 37:
left=true;
                        break;
                    case 38:
top=true;
                        break;
                    case 39:
right=true;
                        break 
;
                    case 40:
bottom=true;
                        break;
                }
            };
            setInterval(function(){
                if(left){
                    oDiv.style.left = oDiv.offsetLeft-10+"px";
                }else if(top){
                    oDiv.style.top = oDiv.offsetTop-10+"px";
                }else if(right){
                    oDiv.style.left = oDiv.offsetLeft+10+"px";
                }else if(bottom){
                    oDiv.style.top = oDiv.offsetTop+10+"px";
                }
            },50);
            document.onkeyup = function(ev){
                var oEvent = ev || event;
                var keyCode = oEvent.keyCode;
                switch(keyCode){
                    case 37:
left=false;
                        break;
                    case 38:
top=false;
                        break;
                    case 39:
right=false;
                        break;
                    case 40:
bottom=false;
                        break;
                }
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

js鍵盤方向鍵實現盒子移動

<html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ width:100px;

每天一個JS 小demo之通過鍵盤方向鍵操作圖片上下左右無縫切換。主要知識點：事件

tco listen add head query ceo defined clas css <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><ti

通過鍵盤方向鍵或電視遙控器控制焦點移動

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width

QML學習之路02: 使用鍵盤方向鍵移動介面的小方塊

main.cpp #include <QGuiApplication> //#include <QQmlApplicationEngine> #include <QQ

python專案實戰:pygame控制鍵盤方向鍵隨意移動

前言本文為大家介紹一個利用python控制控制鍵盤方向鍵隨意移動,用到python的第三方庫pygame,下面就來看看吧匯

js 鍵盤控制表格input上下左右移動

//初始化獲取的行列 var currentLine= 0; var currentCol=0; function keyDown(obj){ var _row = obj.parentNode; currentCol = _row.cellIndex; currentLine = _

JS通過鍵盤點擊事件實現div移動

yar keycode tco var setw get bsp 模擬鍵盤 idt 頁面內容：文本框模擬鍵盤點擊 div元素實現移動； <body> <textarea id="myarea" ti></textarea>

js 判斷鍵盤事件大全相容FireFox和IE（退格、製表、回車、空格、方向鍵、刪除鍵等）

js 鍵盤事件全面控制相容FireFox和IE 主要分四個部分第一部分：瀏覽器的按鍵事件第二部分：相容瀏覽器第三部分：程式碼實現和優化第四部分：總結第五部分：例項介紹附：鍵盤對應編碼值第一部分：瀏覽器的按鍵事件用js實現鍵盤記錄，要關注瀏覽器

資料視窗用鍵盤上的"上下方向"鍵移動選中行, selectrow函式觸發rowfocuschanged事件

2011-06-09 10:58:13更新只要把過載的selectrow函式中的setrow改為scrolltorow就可以很好的解決問題了 :) 在pb11.5中測試發現, scrolltorow總是可以正確的觸發rowfocus事件,它不像setrow那樣受到item

JS實現方向鍵切換輸入框

程式碼如下var array = []; $(document).ready(function(){ array[0] = [document.getElementById("a"),document

改進Vim體驗：在插入模式下移動光標，我不要用方向鍵！alt快捷鍵使用技巧！

targe 判斷映射 tar 什麽 nbsp .vimrc 一次 time 改進Vim體驗：在插入模式下移動光標，我不要用方向鍵！alt快捷鍵使用技巧！大家都知道，我們在插入模式下編輯代碼的時候若想寫完這一部分後，移動到鄰近的一部分，如下一個單詞的後面，是很復雜的

js鍵盤控制div移動，解決停頓問題

版本 pan 原因 idt win jin false top val 問題版本代碼如下： 1 <html> 2 <head> 3 <title>鍵盤控制div移動</title> 4 <meta charse

方向鍵控制圓球運動（簡易）（js）

click linear charset tel speed har utf absolut 運動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

js實現滑鼠移動到div背景顏色變換，移開還原

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js重溫</title> </head> <div id="sss"

js鍵盤事件對應鍵碼

js 裡面的鍵盤事件經常用到，所以收集了鍵盤事件對應的鍵碼來分享下： keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = Clear keyCode 13 = Enter keyCode 16 = Shift_L keyC

原生js實現簡單移動端輪播圖

1、程式碼部分　　分為四個檔案：　　slideshow.html 　　slideshow.css 　　base.js 　　slideshow.js 1.1、slideshow.html <!DOCTYPE html> <html lang="en"&g

JS實現滑鼠移動後面跟隨著特效

要實現的效果是,滑鼠在移動的過程中,滑鼠尾巴後面跟著一些小特效,: 這是滑鼠移動到時候,後面跟隨著小特效其實原理就是遍歷出所有的div小方塊然後每一個小方塊都跟隨自己前面的小方塊, 第一個小方塊就跟隨滑鼠,當滑鼠移動的時候,就會出現這樣的效果 css程式碼:給小方塊設定樣式

easyui快捷鍵實現增刪改(jquery.hotkeys.js外掛)

第一步：下載 jquery.hotkeys.js外掛 http://plugins.jquery.com/hotkeys/ 第二步：js引入  <script type="text/jav

Visio：為什麼按下方向鍵，選中的目標不動，繪圖區（頁面）確在移動

造冰箱的熊貓，本文適用於Microsoft Visio 2007@cnblogs 2018/12/12 檢查下鍵盤的“Scroll Lock”鍵是不是被激活了（鍵盤上對應的指示燈被點亮）。Scroll Lock鍵被啟用時，按下方向鍵等同於用滑鼠拖動繪圖區右側或下方的滾動條。

js&jQuery實現動畫移動

沒次用到都要自己手寫，相當麻煩，於是找時間把它羅列了一下。實現簡單的按鈕點選事件，然後 div移動相應的畫素。其中包括js的快速移動、勻速移動、先快後慢移動。然後實現jQuery的定時移動都採用了定時器，jQuery採用了animate（）方法 /*ele表

js鍵盤方向鍵實現盒子移動

相關推薦