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

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

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

    事件就是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. swoole安装报错详解 mysqlnd_find_charset_nr in Unknow

    今天安装 swoole扩展时候,最后一步报错如下: PHP Warning: PHP Startup: Unable to load dynamic library '/usr/lib64/php/m ...

  2. [HAOI2011]Problem b BZOJ2301 数学

    题目描述 对于给出的n个询问,每次求有多少个数对(x,y),满足a≤x≤b,c≤y≤d,且gcd(x,y) = k,gcd(x,y)函数为x和y的最大公约数. 输入输出格式 输入格式: 第一行一个整数 ...

  3. [WebShow系列] 现场控制台操作方法

    正在制作......,敬请期待. 现场控制台操作方法 现场控制台是现场管理员的管理后台.现场管理员首先登录指定的网址.使用现场管理员指定的登录名及密码就可以登录到后台.在后台点击[WebShow现场控 ...

  4. copy模拟

    1.copy是浅复制,只复制一层:而deepcopy是所有层都复制,适用于lis嵌套listt的复制.两都均是函数.

  5. kerl build error

    删除 archives文件夹就行了

  6. 挑战程序设计竞赛 P131 区间DP

    书上好多题没补 PS.整个DP是根据Q来划分的,dalao的代码就是不一样啊 #include<bits/stdc++.h> #define rep(i,j,k) for(int i=j; ...

  7. java获取缓存通用类

    1 class JedisHelper { public static <T, R> T getBySecond(String cacheKey, int seconds, R p, Fu ...

  8. Tomcat SSL证书安装配置

    [From Internet] 首先找到安装Tomcat 目录下该文件“Server.xml”,一般默认路径都是在Conf 文件夹中.然后用文本编辑器打开该文件,接着找到 <Connector ...

  9. Oracle下lag和lead分析函数

    [转自] http://blog.csdn.net/thinkscape/article/details/8290894 Lead和Lag分析函数可以在同一次查询中取出同一字段的前N行的数据(Lag) ...

  10. Linux kvm虚拟机的基本操作命令

    Linux 虚拟化kvm virsh常用命令篇 1.创建虚拟机 virsh define damo.xml //创建的虚拟机不是活动的 virsh create damo.xml //创建的虚拟机是活 ...