会移动的方块

描述 按键盘上的方向键方块会移动,按住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键盘事件制作会移动效果的更多相关文章

  1. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  2. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  3. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  4. JS键盘事件对象之keyCode、charCode、which属性对比

    先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...

  5. 关于js键盘事件的例子

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  6. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  7. Js键盘事件全面控制,回车按键事件,键盘对应按键码,按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  8. js 键盘事件keyCode 总结

    开发中经常页面中的某些按钮或元素需要绑定到键盘的输入事件 keydown.keyup 事件 keydown 键盘按下触发事件 $("#btn").keydown(function( ...

  9. js键盘事件

    弱鸡今天在写键盘事件,发生一个小bug,排查了1小时(">皿<)可恶的浏览器竟然还不报错!!原因是将e.ctrlKey写成了e.ctrLKey,o(゚Д゚)っ 想想都要生气< ...

随机推荐

  1. 1021. Deepest Root (25)

    A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...

  2. shell命令批量创建指定格式的文件

    shell命令批量创建文件 [root@w212 test]# for count in `seq 9` ;do echo "$count" > a.2018050$coun ...

  3. ajax跨域原理以及jsonp使用

    jsonp介绍: JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. 由于同源策略,一般来说位于 server1.example. ...

  4. google Guava包的ListenableFuture解析

     一. ListenableFuture是用来增强Future的功能的. 我们知道Future表示一个异步计算任务,当任务完成时可以得到计算结果.如果我们希望一旦计算完成就拿到结果展示给用户或者做另外 ...

  5. POJ 2796[UVA 1619] Feel Good

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 16786   Accepted: 4627 Case T ...

  6. groovy.lang.GroovyRuntimeException: Conflicting module versions

    在运行groovy的junit方法时,报了这个错误: java.lang.ExceptionInInitializerError at org.codehaus.groovy.reflection.C ...

  7. vue项目中安装使用echarts

    安装:cnpm install echarts -S (安装依赖并引入到 package.json) 官网安装说明:http://echarts.baidu.com/tutorial.html#%E5 ...

  8. C# 窗体最大化(自适应任务栏位置)

    this.FormBorderStyle = FormBorderStyle.None; this.Location=Screen.PrimaryScreen.WorkingArea.Location ...

  9. C# 窗体内有子控件时鼠标检测

    public partial class FormPop : Form { public FormPop() { InitializeComponent(); } private void FormP ...

  10. python中enumerate()的用法

    enumerate()函数用于遍历一个可遍历的数据对象(如列表.元组或字符串等)的索引和其对应的元素,一般用于for循环中. enumerate(sequence, [start=0]) sequen ...