利用js键盘事件制作会移动效果
会移动的方块
描述 按键盘上的方向键方块会移动，按住alt键和方向键进行大幅度移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会移动的方块（按方向键或alt加方向键）</title>
<style>
* {margin: 0;padding: 0;}
div {width: 200px;height: 200px;position: absolute;background:cyan;}
</style>
<script>
/*
分析
左 对应的键码keyCode：37
上 对应的键码keyCode：38
右 对应的键码keyCode：39
下 对应的键码keyCode：40 */
window.onload = function(){
var oDiv = document.getElementById('div');
window.onkeydown = function(ev){
var e = ev || window.event;
//alert(e.keyCode);//查看键码
var speed = 10; //每次变化的数
//判断是否按下alt键,如果按下每次增加的数度翻十倍
if(e.altKey){
speed *= 10;
}
switch(e.keyCode){
//左
case 37:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'left'));
//每次有效样式减10px
oDiv.style.left = current - speed + 'px';
break;
//上
case 38:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'top'));
//每次有效样式减10px
oDiv.style.top = current - speed + 'px';
break;
//右
case 39:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'left'));
//每次有效样式加10px
oDiv.style.left = current + speed + 'px';
break;
//下
case 40:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'top'));
//每次有效样式加10px
oDiv.style.top = current + speed + 'px';
break;
}
} } /*------封装获取当前有效样式的函数---------*/
function getStyle(node, styleType){
return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
} /*------封装获取当前有效样式的函数end---------*/ </script>
</head>
<body>
<div id="div"></div>
</body>
</html>
浏览器效果：
才此基础上插入一个背景图加以修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>会移动的凤凰（按方向键或alt加方向键）</title>
<style>
* {margin: 0;padding: 0;}
div {width: 293px;height: 220px;position: absolute;background:url(fenghuang1.gif);}
</style>
<script>
/*
分析
左 对应的键码keyCode：37
上 对应的键码keyCode：38
右 对应的键码keyCode：39
下 对应的键码keyCode：40 */
window.onload = function(){
var oDiv = document.getElementById('div');
window.onkeydown = function(ev){
var e = ev || window.event;
//alert(e.keyCode);//查看键码
var speed = 10; //每次变化的数
//判断是否按下alt键,如果按下每次增加的数度翻十倍
if(e.altKey){
speed *= 10;
}
switch(e.keyCode){
//左
case 37:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'left'));
//每次有效样式减10px
oDiv.style.left = current - speed + 'px';
//按下 左时 div第transform 都等于 逆时针180度
oDiv.style.transform = 'rotate(-180deg)';
break;
//上
case 38:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'top'));
//每次有效样式减10px
oDiv.style.top = current - speed + 'px';
//按下 上时 div第transform 都等于 逆时针90度
oDiv.style.transform = 'rotate(-90deg)';
break;
//右
case 39:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'left'));
//每次有效样式加10px
oDiv.style.left = current + speed + 'px';
//按下 右时 div第transform 都等于 逆时针0度
oDiv.style.transform = 'rotate(0deg)';
break;
//下
case 40:
//获取当前的有效值,获取的值有单位px 用parseInt转换成整型（去掉单位）
var current = parseInt(getStyle(oDiv, 'top'));
//每次有效样式加10px
oDiv.style.top = current + speed + 'px';
//按下 右时 div第transform 都等于 顺时针90度
oDiv.style.transform = 'rotate(90deg)';
break;
}
} } /*------封装获取当前有效样式的函数---------*/
function getStyle(node, styleType){
return node.currentStyle ? node.currentStyle[styleType] : getComputedStyle(node)[styleType];
} /*------封装获取当前有效样式的函数end---------*/ </script>
</head>
<body>
<div id="div"></div>
</body>
</html>
浏览器效果：
使用到的图片：
利用js键盘事件制作会移动效果的更多相关文章
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- JS键盘事件对象之keyCode、charCode、which属性对比
先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...
- 关于js键盘事件的例子
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...
- Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。
在网上查询的按键码如下: 一.键盘按键和键盘对应代码表: 字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...
- js 键盘事件keyCode 总结
开发中经常页面中的某些按钮或元素需要绑定到键盘的输入事件 keydown.keyup 事件 keydown 键盘按下触发事件 $("#btn").keydown(function( ...
- js键盘事件
弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(ﾟДﾟ)っ 想想都要生气< ...
随机推荐
- Math对象小笔记
来,总结下Math对象的常用方法和属性 1.E 自然对数的底数 Math.E; //2.718281828459045 2.PI 圆周率 Math.PI; //3.141592653589793 3 ...
- ML面试题网站及ML模型网站
一.面试题网站 1)最全:http://www.epx365.cn/jyzn/201839501.html 2)七月在线:https://blog.csdn.net/movie14/article/d ...
- 修改Linux Operating System的时间与时区
修改Linux Operating System的时间与时区 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 有的小伙伴可能会遇到安装了linux系统后,尽管时区选择正确,也会发现系 ...
- 面向对象【day07】：面向对象概念介绍（二）
本节内容 1.概念 2.特性 3.面向对象介绍 一丶概念 1.面向对象编程 OOP(Object-Oriented Programming)编程是利用“类”和“对象”来创建各种模型来实现对真实世界的描 ...
- Linux命令之ln
ln命令(是l不是i注意了) 用处:建立链接,分为软链接和硬链接 用法:下面讲 示例: 一.硬链接 我想给profile文件建立一个硬链接(硬链接就是把这个文件复制一份的意思) 硬链接hard建好了, ...
- javascript 拖拽事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HashMap内存泄漏
看Java核心技术1的时候看到HashMap的对象,书中讲到: 1.如果有一个值,对应的键不再使用他了,但由于key与value之间存在强引用,是不会被垃圾回收的 2.垃圾回收器跟踪活动的对象,只要映 ...
- kruskal算法：POJ No.3723 Conscription_最小生成树应用_最大权森林
#define _CRT_SECURE_NO_WARNINGS /* 5 5 8 4 3 6831 1 3 4583 0 0 6592 0 1 3063 3 3 4975 1 3 2049 4 2 2 ...
- spring集成ActiveMQ居然要依赖这么多包
做spring和ActiveMQ的集成,作maven依赖的时候有感(以前都不在乎,现在不一样了........省略) <!-- https://mvnrepository.com/artifac ...
- 七、UART
7.1 介绍 UART(Universal Asynchronous Receiver Transmitter),通用异步收发器,用来传输穿行数据时 UART 之间以全双工方式传输数据,连线方法只有 ...