会移动的方块

描述 按键盘上的方向键方块会移动，按住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. 盖得化工--selenium翻页测试

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  2. P1282 多米诺骨牌

    P1282 多米诺骨牌 题目描述 多米诺骨牌有上下2个方块组成,每个方块中有1~6个点.现有排成行的 上方块中点数之和记为S1,下方块中点数之和记为S2,它们的差为|S1-S2|.例如在图8-1中,S ...

  3. 设计模式---对象创建模式之抽象工厂模式（Abstract Factory）

    一:概念 抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的.抽象工厂模式可以向客户端提供一个接口,使得客户端在不必指定产品的具体类型的情况下,能够创建多个产品族的产品对象 二:动机 在软件系统 ...

  4. 数据库sql语句例题（转）

    SQL数据库面试题以及答案(50例题) Student(S#,Sname,Sage,Ssex)学生表 S#:学号 Sname:学生姓名 Sage:学生年龄 Ssex:学生性别 Course(C#,Cn ...

  5. 《高性能Mysql》讲聚簇索引

    <高性能Mysql>原文 聚簇索引如下图为聚簇所有的存储方式,聚簇实际不是一种索引,而是一种数据的存储方式,InnoDB的聚簇事假在同一个结构中保存了B-Tree索引和数据行. 当表有聚簇 ...

  6. Linux 命令详解（五）cp 命令两个高效的用法

    cp 命令两个高效的用法http://mp.weixin.qq.com/s/j7h-MayR0kCxfufWx0FtrA

  7. MySQL Load Data InFile 数据导入数据库

    常用如下: Load Data InFile 'C:/Data.txt' Into Table `TableTest` Lines Terminated By '\r\n'; 这个语句,字段默认用制表 ...

  8. Eclipse通用设置

    分类 Eclipse分为64位.32位,安装版.免安装版 查看Eclipse版本信息 Help - About Eclipse - Installation Details

  9. extern的作用

    #include <stdio.h>extern int a;static int a;extern int b;int b;static int c;extern int c;

  10. linux下比较两个文本文件的不同——diff命令

    1>Diff命令的功能Linux中Diff命令的功能为逐行比较两个文本文件,列出其不同之处.它对给出的文件进行系统的检查,并显示出两个文件中所有不同的行,不要求事先对文件进行排序. 2>语 ...