2. 程式人生 > 其它 >鍵盤事件練習 ——控制div移動

鍵盤事件練習 ——控制div移動

阿新 • • 發佈：2021-01-24

技術標籤：javascriptjsjavascriptcssswitchhtml

控制div移動


topic:小鍵盤方向鍵控制div移動

思考一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box {
				width: 100px;
				height: 100px;
				background-
 
color: #8A2BE2;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box">

		</div>
		<script type="text/javascript">
			
			document.onkeydown = function(event) {
				event = event || window.event;
				// 37  39
				//var box = document.getElementById("box");
 

				var speed = 10;
				if(event.ctrlKey){
					speed = 30;
				}
				switch (event.keyCode) {
					case 37:
						
						box.style.left = box.offsetLeft - speed + "px";
						break;
					case 39:
						box.style.left = box.offsetLeft + speed + "px";
						break;
					case 38:
						box.
 
style.top = box.offsetTop-speed+"px";
						break;
					case 40:
						box.style.top = box.offsetTop+speed+"px";
						break;
				}
			};
		</script>
	</body>
</html>

相關推薦

鍵盤事件練習 ——控制div移動

技術標籤：javascriptjsjavascriptcssswitchhtml 控制div移動 topic:小鍵盤方向鍵控制div移動

js實現上下左右鍵盤控制div移動

本文例項為大家分享了js上下左右鍵盤控制div移動的具體程式碼，供大家參考，具體內容如下

JavaScript利用鍵盤碼控制div移動

前言 在生活中肯定有玩過貪吃蛇的遊戲，那麼要怎麼樣用鍵盤碼來實現div的移動呢？下面就分享一個Demo。

定時器控制div移動，封裝動態常用函式

技術標籤：javascriptjscssjavascriptdiv移動常用 定時器控制div移動，建立一個可以執行簡單動畫的函式

C語言 ACLLib鍵盤方向鍵控制圖形移動以及滑鼠控制圖形移動

目錄 滑鼠的引數 鍵盤的引數 鍵盤方向鍵控制圖形移動 滑鼠控制圖形移動 滑鼠的引數

用鍵盤控制軟體 鍵盤事件 例如上下左右鍵

當窗體KeyPreview屬性設定為True時，則首先觸發窗體的鍵盤事件。 鍵盤事件有三種：KeyPress、KeyDown、KeyUp

鍵盤控制元素移動案例

想要實現鍵盤控制圖片移動該怎麼辦呢?  1.需要獲取鍵盤2.需要獲取圖片座標 程式碼如下:

Android物理鍵盤事件解析

前言 Android裝置連線物理鍵盤其實是個挺小眾的需求，其實Android裝置本身就是支援物理鍵盤，dispatchKeyEvent()這個方法就可以監聽物理鍵盤，這裡提供一個封裝的類，解析鍵盤事件。有很多事件，具體可以去看KeyEven

js鍵盤事件實現人物的行走

本文例項為大家分享了js鍵盤事件實現人物行走的具體程式碼，供大家參考，具體內容如下

Python2.7:使用Pyhook模組監聽滑鼠鍵盤事件-獲取座標例項

Python2.7: 使用Pyhook模組監聽滑鼠鍵盤事件-獲取座標。因該模組對Python3 有相容性問題，故採用python2.7直譯器。

unity實現手機端搖桿控制人物移動

前言 玩過王者榮耀或者荒野行動的人，都知道，手機左下方或右下方都會有一個搖桿，滑動搖桿可以讓人物向360度方向移動。沒有玩過的可以看看下方圖片（荒野行動手機端為例）。本篇就來講解如何使用unity製作搖桿控制人

JavaScript監聽鍵盤事件程式碼實現

在寫網頁的時候，常常需要監聽鍵盤事件，讓我們來看看如何實現吧。 監聽方式

DataGridView響應鍵盤事件

問題： 在做《研發日工資表》的時候，需要在單元格編輯時響應鍵盤按鍵（按F6向下批量填充資料）。

WIN32 列舉視窗 滑鼠鍵盤事件

//查詢視窗 　　TCHAR szTitle[MAX_PATH] = {0}; HWND hwnd = ::FindWindow(TEXT(\"#32770\"),\"PE工具\");

css控制div的各種形狀

css控制div的各種形狀 CSS3的一個非常酷的特性是允許我們建立各種規則和不規則形狀的圖形，從而可以減少圖片的使用。

vue鍵盤事件點選事件加native操作

如下所示： <el-card class=\"box-card animated flipInY\"> <el-form :model=\"ruleForm2\" :label-position=\"labelPosition\" status-icon :rules=\"rules2\" ref=\"ruleForm2\" label-width=\"50px\"

android 拖拽控制元件移動

constraintLayout.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) {

JS控制div跳轉到指定的位置的解決方案3(用js的srollIntoView方法進行使用)

<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>文件標題</title><style>div {height: 800px;width: 400px;border: 2px solid black;}#container{position:

jquery 鍵盤事件 keypress() keydown() keyup()

事件的定義 完整的 key press 過程分為兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。

Shell和Python獲取鍵盤事件

Shell和Python可以說是Linux環境中很常用的指令碼語言了，可以方便地實現運維、測試等等自動化，減輕人的負擔。