键盘事件

思路讲解

1.在body标签中添加事件<body onkeydown=”函数”>，在函数前定义初始位置

2.定义事件源比较常用方法 get。。。Id得到

 3.获取按键编码 var（code）=event.keyCode输出查看编码
4.转换编码
switch（code）{case 编码：位置变化关系；break；}
5.定义事件源属性变化 事件.style.top(or left)=函数运行后的位置+“px”

代码如下：

<!DOCTYPE html>

<html>

    <head>

       <meta charset="UTF-8">

       <title></title>

           #q1{

              width:20%;

              height:20%;

              border:1px dashed red;

              position:absolute;

              left:0px;

              top:0px;

           }

    </head>

    <body onkeydown="fun();">

       <img id="q1" src="../img/02.jpg" />

    <script>

    var x=0;

    var y=0;

         function fun(){

            //获取图片对象

            var img = document.getElementById("q1");

        var code=event.keyCode;//获取按下按钮的编码

        // document.write(code);

             switch(code)

             {

                case 37://左

                x=x-10;

                break;

                case 38://上

                y=y-10;

                break;

                case 39://右

                x=x+10;

                break;

                case 40://下

                y=y+10;

                break;

             }

             img.style.left=x+"px";

             img.style.top=y+"px";

         }

    </script>

    </body>

</html>

           #q1{

              width:20%;

              height:20%;

              border:1px dashed red;

              position:absolute;

              left:0px;

              top:0px;

           }