利用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(ﾟДﾟ)っ 想想都要生气< ...
随机推荐
- JavaSE学习总结（十五）—— Java反射与注解
一.静态语言与动态语言 静态类型语言:是指在编译时变量的数据类型即可确定的语言,多数静态类型语言要求在使用变量之前必须声明数据类型,某些具有类型推导能力的现代语言可能能够部分减轻这个要求.强类型 动态 ...
- Java Calendar使用总结
JavaCalendar 类时间操作,这也许是创建和管理日历最简单的一个方案,示范代码很简单. 演示了获取时间,日期时间的累加和累减,以及比较. 原文地址:blog.csdn.NET/joyous/a ...
- Python写日志
import logging import ResultFolder logger = logging.getLogger() logger.setLevel(logging.DEBUG) def C ...
- Idea下安装Lombok插件
参照:http://www.cnblogs.com/holten/p/5729226.html https://yq.aliyun.com/articles/59972 lombok是一个可以通过简单 ...
- JS在Html中使用JavaScript
一.三种方式 1)<script>元素 2)外部文件 3)文档模式 二.<script>元素 是向HTML页面插入JavaScript的主要方法:HTML 4.01为<s ...
- 一个极好的JavaScript学习网址
JavaScript学习网址:https://javascript.info/ 网址界面如下,内容和排版都非常不错,内容也比较新,不像一些教程已经是好几年前的了.把这个教程浏览一遍,能够解答很多看代码 ...
- hud 2554 N对数的排列问题 （规律）
题目链接 Problem Description 有N对双胞胎,他们的年龄分别是1,2,3,--,N岁,他们手拉手排成一队到野外去玩,要经过一根独木桥,为了安全起见,要求年龄大的和年龄小的排在一起,好 ...
- MGR架构~单写模式架构的搭建
一 简介 :MGR一直没有时间测试,今天咱们来初步了解搭建一下呗 二 环境: mysql5.7.20 单台机器 启动三实例 三 mysql 搭建: 1 建立相关目录+ mkdir -p /data ...
- mysql 案例~关于pt-osc工具的用途
简介:今天咱们聊聊PT-OSC的东东一 简单介绍 1 标准组合 pt-online-schema-change --user= --password= --host= D=,t= --sock= ...
- 在iOS 开发中用GDataXML(DOM方式)解析xml文件
因为GDataXML的内部实现是通过DOM方式解析的,而在iOS 开发中用DOM方式解析xml文件,这个时候我们需要开启DOM,因为ios 开发中是不会自动开启的,只有在mac 开发中才自动开启的.我 ...