让div跟按键走,基本键码
---恢复内容开始---
想要快速的做这样一个简单效果,首先要明白它的原理;
样式设置的重点,就是要跟上次拖拽一样,给该元素绝对定位,
事件就是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跟按键走,基本键码的更多相关文章
- 【转】Windows按键消息—虚拟键码
来源:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息的 ...
- Windows按键消息—虚拟键码(转)
源地址:http://c.biancheng.net/cpp/html/1253.html 虚拟键码保存在WM_KEYDOWN.WM_KEYUP.WM_SYSKEYDOWN和WM_SYSKEYUP消息 ...
- 父类div高度适应子类div
父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...
- C#窗体模拟键盘按键(组合键)产生事件 ---- 通过keybd_event()函数
如何模拟键盘按键触发产生的事件,比如模拟按下Alt + F4 关闭当前程序,Ctrl+Shift 切换输入法等 可以通过win32api 键盘事件 keybd_event() 来实现 1.定义键盘按键 ...
- C#窗体如何通过keybd_event()函数模拟键盘按键(组合键)产生事件
如何模拟键盘按键触发产生的事件,比如模拟按下Alt + F4 关闭当前程序,Ctrl+Shift 切换输入法等 可以通过win32api 键盘事件 keybd_event() 来实现 1.定义键盘按键 ...
- 问题:做EsayUI分页报错 $(...).pagination is not a function之后我把<jsp:include page="top.jsp"/>去掉就好了,有大神知道为什么吗?另外分页按键放在那里好些,我放到form表单下,就开始显示,点一下后就没有了
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
- 【three.js第七课】鼠标点击事件和键盘按键事件的使用
当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...
- 【MarkMark学习笔记学习笔记】javascript/js 学习笔记
1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作 ...
- input 子系统架构总结【转】
Linux输入子系统(Input Subsystem) 转自:http://blog.csdn.net/lbmygf/article/details/7360084 Linux 的输入子系统不仅支持鼠 ...
随机推荐
- Tomcat 部署项目的几种常见方式
转自:https://www.cnblogs.com/yuht/p/5714624.html https://www.cnblogs.com/ysocean/p/6893446.html Tomcat ...
- oracle数据库操纵语言DML
oracle数据库操纵语言:DML 添加数据: ()直接添加数据: insert into table_name(column_name1,column_name2,...) values(data1 ...
- Feel Good(两遍单调栈维护区间+前缀和)
Bill is developing a new mathematical theory for human emotions. His recent investigations are dedic ...
- HDU6333 莫队+组合数
题目大意: 给定n m 在n个数中最多选择m个的所有方案 #include <bits/stdc++.h> using namespace std; #define INF 0x3f3f3 ...
- LightOJ - 1245 根号n暴力
打表或者画个图可以看出i>根号n时每个i的贡献值相差很小,可以利用公式优化(函数C) 但是注意不能一整段使用公式,否则复杂度还是会劣化到O(n)(显然对gongxian只能逐步递减) 网上看了不 ...
- aoj0525
一.题意:题目大致是讲一个烧饼铺烤烧饼,在一个n X m (1<=n<=10,1<=m<=10000)的烤桌上面摆着一堆烧饼,数字1表示烧饼正面,0表示烧饼反面.然后你每次可以 ...
- contentType 应用,(表中数据大量存在外键时使用)
当表中有大量的foreignkey 外键时,而且后期还有可能加入一些外键时, 使用django自带的contenttype表(表结构是app名和表的对应的每个类字段) 1. Django 中的 con ...
- QWebView使用
问题: 开始编译的时候在pro文件中要加上 QT += core gui webkitwidgets 文件使用部分加上 #include<QtWebKitWidgets/QWebView&g ...
- springboot+Zookeeper+Dubbo入门
最近想学习dubbo,就利用周末写了一个特别简单的demo,不知道有没有用,先记录一下. 1.安装zookeeper并启动(安装看我上一篇博客https://www.cnblogs.com/huang ...
- oracle 错误实例分析(ORA-01078)
01,问题描述 心血来潮想看一下启动数据库的alert log.然后把数据库给关闭了,同时也在监听日志文件 下面可谓是详细的描述了整个关机过程,也看到了无数的error [root@node1 ...