js實現鍵盤控制移動div

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

簡單原理：

獲取鍵盤keyCode，按一定規則改變指定div的邊距實現控制指定div的移動。需注意的是要考慮div的溢位問題，要編寫函式限制移動範圍。

實現效果：

使用者通過鍵盤的指定鍵指定div在web頁面內移動。

程式碼塊

html程式碼

<body>
<div id="d1">
<pre>您可以使用鍵盤進行如下操作：

上：↑ 下：↓ 左：← 右：→ 
</pre>
</div>
<div id="d2">我可以移動</div>
</body>

javascriptt程式碼

window.onload=function 
(){
    var div=document.getElementById('d2');
    var keyT=keyB=keyL=keyR=false;//設定指定鍵初始值
    setInterval(function(){//設定定時器，鍵盤按下每隔10毫秒執行一次移動操作
        if(keyL){
            div.style.left=div.offsetLeft-10+"px";
            }
        else if(keyR){
            div.style.left=div.offsetLeft+10+"px";
            }
        if 
(keyT){
            div.style.top=div.offsetTop-10+"px";
            }
        else if(keyB){
            div.style.top=div.offsetTop+10+"px";
            };  
            limit()//limit()函式限制div移動防止溢位
        },10);

    document.onkeydown=function(event){//keydown事件，keyCode繫結移動鍵位
        var event=event||window.event;
        switch 
(event.keyCode){
            case 37:
                keyL=true;//if語句執行，div左移動
                return;
            case 38:
                keyT=true;
                return;
            case 39:
                keyR=true;
                return;
            case 40:
                keyB=true;
                return;
            }
        }
    document.onkeyup=function(event){//keyup事件，使用者鬆開按鍵時移動停止
        var event=event||window.event;
        switch(event.keyCode){
            case 37:
                keyL=false;
                break;
            case 38:
                keyT=false;
                break;
            case 39:
                keyR=false;
                break;
            case 40:
                keyB=false;
                break;
            }
        }
    };

limit()函式

function limit(){
        (div.offsetLeft<=0)&&(div.style.left=0);
        //防止左溢位
        (div.offsetTop<=0)&&(div.style.top=0);
        //防止上溢位
        (div.offsetLeft+div.offsetWidth>=document.documentElement.clientWidth)&&(div.style.left=document.documentElement.clientWidth-div.offsetWidth+"px");
        //防止右溢位
        (div.offsetTop+div.offsetHeight>=document.documentElement.clientHeight)&&(div.style.top=document.documentElement.clientHeight-div.offsetHeight+"px");
        //防止下溢位
        }

js實現鍵盤控制移動div

簡單原理：獲取鍵盤keyCode，按一定規則改變指定div的邊距實現控制指定div的移動。需注意的是要考慮div的溢位問題，要編寫函式限制移動範圍。實現效果：使用者通過鍵盤的指定鍵指定div在web頁面內移動。程式碼塊 html程式碼 &

js 實現鍵盤控制方塊移動

需求：在網頁上有一個方塊，我們需要鍵盤上下左右鍵控制方塊的移動。程式碼： <!doctype html> <html> <head> <met

JS實現鍵盤移動游標

通過鍵盤的上下左右，實現對游標的移動，當點選回車時，進入所選的對應頁面。左邊是選單欄，右邊是具體資料。左邊的選單欄佈局右邊的具體資料區域性 1、先

JS上下左右鍵盤控制圖片移動

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />&l

unity 實現鍵盤控制物體移動和轉向

unity 的character controller不太好用，碰撞什麼的不好操作，經常需要自己寫人物移動的指令碼，所以就記錄一下。這個指令碼程式碼很簡單，實現的是按下鍵盤上下方向鍵，人物前進後退，按下鍵盤左右方向鍵，人物向左或向右轉彎。一般情況下使用一個膠囊體代表pl

css,js實現在滑鼠移動到一個位置在這個位置下面顯示一個已經存在的div，這個div的位置隨意

<div id="retreatdiv"> <p class="retreat font_s" > 這是要顯示的內容 </div> //當滑鼠移動到這個<span>時候 &

JS實現鍵盤監聽(包括組合鍵)

nbsp html gist 收集 and ros register col next 依然使用案例驅動~案例是學習的最好實踐！ <html> <head> <meta

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

近期接觸了移動端html5和css3，想加入些輪播圖，於是在網上搜集整理了一些資料，經自己補充改進使之較為完善原生JavaScript 移動端web輪播圖片實現功能索引小圓點過渡滑動動畫的定時輪播移動端可以滑動切換圖片滑動距離不夠則吸附回去效果圖

JS實現某東移動web輪播圖

移動web輪播圖參考例項，可以從中儲存輪播圖的圖片，這裡我們放入uploads的資料夾下，將八張圖片一次改為l1.jpg,l2.jpg… https://m.jd.com/ HTML 這裡要放入十張圖片，因為手指滑動的時候要從第一張滑動到最後一張，是無

unity 滑鼠控制第一人稱視角及鍵盤控制移動

指令碼MouseLook（在主相機上）： using UnityEngine; using System.Collections; public class Mouselook : MonoBehaviour { public enum RotationAxes{

JS實現OCX控制元件的事件響應

JS支援OCX控制元件的事件（event），當OCX控制元件定義的事件發生時，JS可以捕獲該事件並對事件進行相應的處理。個人理解，其實就是事件的響應由誰來完成，OCX控制元件自身肯定是可以實現的，JS提供的這種機制使JS也可以完成OCX控制元件事件的響應。簡單舉例如下

js 實現列表上下移動排序

<!DOCTYPE html> <html><head><title>列表值上下排序 Demo</title><link rel="stylesheet" type="text/css" href="fram

js實現時間控制元件，PC端展示帶點日期外掛

html: <div class="dotDate"></div><style type="text/css"> /* 日期樣式 */ .datePicker caption{text-align:center;} .dat

JS實現滑鼠事件移動換圖

1.原始碼<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width

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

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

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

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

Js事件案例——上下左右鍵盤控制div移動

描述： div通過鍵盤事件上下左右實現div塊的移動效果：實現： js： var Method=(function () { return { EVENT_ID:"event_id", lo

JS實現跟隨鼠標移動的div，和一串跟隨鼠標的div，鼠標移入移出實現圖片的顏色淡入淡出

nload nts timer inf ntb doc tel ctype target 1.一直跟著鼠標移動的div：原理是div的left和top值有oEvent.clientX+scrollLeft鼠標指針向對於瀏覽器頁面（或客戶區）的水平坐標+元素中滾動條的水平偏移

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

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

js控制移動端的input失去焦點時隱藏鍵盤

原理：點選input輸入完成後點選手機其他區域，手機鍵盤並沒有隱藏，因為點選其他區域時input並沒有失去焦點，所以解決的辦法就是當點選螢幕其他區域時，使input誰去焦點就可以了程式碼： //手機鍵盤隱藏(簡單粗暴版) $('body').on('touchend',

js實現鍵盤控制移動div

簡單原理：

實現效果：

程式碼塊

相關推薦