---恢复内容开始---

想要快速的做这样一个简单效果，首先要明白它的原理;

　　　　样式设置的重点，就是要跟上次拖拽一样，给该元素绝对定位，

　　　　事件就是onkeydown,事件，通过判断键码，来执行；

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			#dDiv{

				width: 100px;

				height: 100px;

				background-color: red;

				position: absolute;

			}

		</style>

		<script type="text/javascript">

			window.onload=function(){

				var dDiv=document.getElementById("dDiv")

				var a=8;

				var b=8;

				window.onkeydown = function(e){

					if(e.keyCode==37){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//左

//						当鼠标按下时判断键码

						dDiv.style.left=b-- +"px"

					}

					if(e.keyCode==38){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//上

						dDiv.style.top=a-- +"px"

					}

					if(e.keyCode==39){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//右

						dDiv.style.left=b++ +"px"

					}

					if(e.keyCode==40){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//下

						dDiv.style.top=a++ +"px"

					}

				}

			}

		</script>

	</head>

	<body>

		<div id="dDiv">

		</div>

	</body>

</html>

　　　　2.熟悉一下常使用的特殊键码：

　　　　　　

按键   	      键码	  按键	  键码	 按键  	 键码

BackSpace 	8	   Esc	  27	    Right Arrow  39

Tab	                9	Spacebar	  32	    Down Arrow	  40

Clear    	       12	Page Up	  33	    Insert	          45

/?	             191      Enter	         13	   Page Down	 34

Delete	      46      `~	         192      -_	         189

.>	              190      Shift	         16	     End	       35

Num Lock      144      [{219         Control  	17

Home	     36      ;:	       186	      /|	      220

Alt	              18	  Left Arrow	37	    =+	    187

]}	             221            Cape Lock	                                20

　　

　　　　

　　　　　　

---恢复内容结束---

让div跟按键走，基本键码的更多相关文章

  1. 【转】Windows按键消息—虚拟键码

    来源:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息的 ...

  2. Windows按键消息—虚拟键码（转）

    源地址:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息 ...

  3. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  4. C#窗体模拟键盘按键（组合键）产生事件 ---- 通过keybd_event()函数

    如何模拟键盘按键触发产生的事件,比如模拟按下Alt + F4 关闭当前程序,Ctrl+Shift 切换输入法等 可以通过win32api 键盘事件 keybd_event() 来实现 1.定义键盘按键 ...

  5. C#窗体如何通过keybd_event()函数模拟键盘按键（组合键）产生事件

    如何模拟键盘按键触发产生的事件,比如模拟按下Alt + F4 关闭当前程序,Ctrl+Shift 切换输入法等 可以通过win32api 键盘事件 keybd_event() 来实现 1.定义键盘按键 ...

  6. 问题：做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了，有大神知道为什么吗？另外分页按键放在那里好些，我放到form表单下，就开始显示，点一下后就没有了

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  7. 【three.js第七课】鼠标点击事件和键盘按键事件的使用

    当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...

  8. 【MarkMark学习笔记学习笔记】javascript/js 学习笔记

    1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...

  9. input 子系统架构总结【转】

    Linux输入子系统(Input Subsystem) 转自:http://blog.csdn.net/lbmygf/article/details/7360084 Linux 的输入子系统不仅支持鼠 ...

随机推荐

  1. php中的openssl开启方法

    windows下开启方法: 1: 首先检查php.ini中:extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘:', 如果不存在这行,那么添加extensio ...

  2. SqlServer批量插入（SqlBulkCopy、表值参数）

    之前做项目需要用到数据库的批量插入,于是就研究了一下,现在做个总结. 创建了一个用来测试的Student表: CREATE TABLE [dbo].[Student]( [ID] [int] PRIM ...

  3. TX1 文字界面启动与root用户自动登录设置

    设置默认文字启动界面 更改/boot/extlinux/extlinux.conf文件,在最后一行的末尾添加 text. 设置自动登录 在/etc/init/tty1.conf文件末尾添加: exec ...

  4. 2A - Stone

    任意一堆移动过后的石子都是整数x的倍数, 那么石子总数显然也应该是x的倍数, 换句话说,x必为石子数总和的一个质因子. 题目要求移动次数尽量小,那么x也应该尽量小. 所以选择石子数总和的最小质因子. ...

  5. Qt 学习之路 2（53）：自定义拖放数据

    Qt 学习之路 2(53):自定义拖放数据 豆子  2013年5月26日  Qt 学习之路 2  13条评论上一章中,我们的例子使用系统提供的拖放对象QMimeData进行拖放数据的存储.比如使用QM ...

  6. POJ 2182 Lost Cows (求序列第k大)

    题解 二分+树状数组 显然最和一个数的值就是rank 那么其它数有什么规律? 从后往前匹配rank,我们可以发现第i个数的rank为还没有匹配的rank第(a[i]+1)大的数 这可以用 树状数组+二 ...

  7. P4294 [WC2008]游览计划

    传送门 斯坦纳树 给一个联通图,求 $k$ 个关键点联通的最小生成树权值 设 $f[o][i]$ 表示当前关键点选择状态为 $o$ ,以点 $i$ 为根的树的最小权值 初始 $f[1<<( ...

  8. 那些熟悉又陌生的 css2、css3 样式，持续复习

    initial关键字:    除了 Internet Explorer,其他的主流浏览器都支持 initial 关键字. Opera 15 之前的版本不支持 initial 关键字. initial ...

  9. [转] JQuery UI Tabs 动态添加页签，并跳转到新页签

    [From] https://blog.csdn.net/zhangfeng2124/article/details/76672403 需求: 1.tabs默认只有一个页签,但是需要点击某按钮,动态添 ...

  10. linux 运维基础之http协议详解

    引言 这尼玛博客还得自己在这里写,难受一匹本来排版好的...每次都这样嗨....本内容属于借鉴资源,侵权删! HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系 ...