js键盘按下移动元素
文章地址 https://www.cnblogs.com/sandraryan/
功能： 点击上下左右按钮，移动元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
// 文档绑定点击时间
document.onkeydown = function(ev){
var e = ev || event;
// 获取当前元素的左，上位置
var l = box.offsetLeft;
var t = box.offsetTop;
// 比较按下的键的键码，是上下左右就像上下左右移动
// （会移出页面，可以加父元素控制移动范围，或在js中判断超过某一值停止移动）
switch(e.keyCode){
case 37:
l -= 5;
break;
case 38:
t -=5;
break;
case 39:
l += 5;
break;
case 40:
t +=5;
}
// 重新设置top left
box.style.left = l + 'px';
box.style.top = t + 'px';
}
</script>
</body>
</html>
js键盘按下移动元素的更多相关文章
- js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。
在网上查询的按键码如下: 一.键盘按键和键盘对应代码表: 字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- jquery层级原则器（匹配前一个元素后的下一个元素，必须是挨着的）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何借助浏览器Console使用Js进行定位和操作元素
在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法? 其实我们都知道,Sel ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
随机推荐
- NPOI 1.0
1 应用组件 using NPOI.SS.UserModel; using NPOI.HSSF.Util; 2.一个简单demo 2.1 定义单元格常用到样式的枚举 public enum st ...
- Pycharm安装package报错：AttributeError: module 'pip' has no attribute 'main'
Pycharm安装package报错:AttributeError: module 'pip' has no attribute 'main' 确认pip已经升级到目前最新版本了. 在网上搜寻后,解决 ...
- WPF：数据绑定总结（1） https://segmentfault.com/a/1190000012981745
WPF:数据绑定总结(1) visual-studio c# 1.3k 次阅读 · 读完需要 16 分钟 0 一.概念:什么是数据绑定? WPF中的数据绑定:是在应用程序 UI 与业务逻辑之间建立 ...
- CWnd::Attach()具体解释
CWnd::Attach Attaches a Windows window to a CWnd object. BOOL Attach( HWND hWndNew ); Parameters ...
- WEB性能测试用例设计
性能测试用例主要分为预期目标用户测试,用户并发测试,疲劳强度与大数据量测试,网络性能测试,服务器性能测试五大部分,具体编写测试用例时要根据实际情况进行裁减,在项目应用中遵守低成本,策略为中心,裁减,完 ...
- node.js的path模块
path模块的各种API path.join([...paths]) 参数:paths <string> ,paths参数是字符串,这些字符串按路径片段顺序排列,(A sequence o ...
- JS原生实现五角星评价详情demo
<style> *{margin: 0;padding: 0;} .pingfen{ width: 195px; margin:10px auto; height:20px; positi ...
- VUE中的style 样式处理的Scope （<style scope>）
在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...
- fedora下eclipse安装tomcat插件
首先下载tomcat插件: http://www.eclipsetotale.com/tomcatPlugin.html,下载最新的3.3版本: 由于我的eclipse是通过yum自动安装的,因此ec ...
- Apache Camel 与 Spring Boot 集成，通过FTP定时采集、处理文件 （转）
1.概要: 本项目主要是通过在Spring平台上配置Camel.FTP,实现定时从FTP服务器下载文件到本地.解析文件.存入数据库等功能. 2.搭建空项目: Spring Boot有几种自动生成空项目 ...