jQuery学习：用按键移动方块

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
    #gs{width:100px;height:100px;border:1px solid #000;background-color:#aaa;top:200px;position:relative;}
    p{position:fixed;left:10px;top:10px;border:1px solid #f00;}
    </style>
    <script src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
            var startPos=$('#gs').offset();
            var step=50;
            var endPos={};
            var move=function(direction){
                switch(direction){
                    case 'L':
                        var lf=startPos.left-step;
                        $.extend(endPos,{left:lf});
                        break;
                    case 'R':
                        var lf=startPos.left+step;
                        $.extend(endPos,{left:lf});
                        break;
                    case 'T':
                        var tp=startPos.top-step;
                        $.extend(endPos,{top:tp});
                        break;
                    case 'B':
                        var tp=startPos.top+step;
                        $.extend(endPos,{top:tp});
                        break;
                }
                $('#gs').animate(endPos,'fast',function(){startPos=$('#gs').offset();});
            }
        $(document).keyup(function(e){
            switch(String.fromCharCode(e.keyCode)){
                case 'A':
                    move('L');
                    break;
                case 'D':
                    move('R');
                    break;
                case 'W':
                    move('T');
                    break;
                case 'S':
                    move('B');
                    break;
            }
        });
});
</script>
  </head>
  
 <body>
<div id="gs"></div>
<p>效果：按下键盘上的A、D、W、S键试试</p>
</body>
</html>

相关阅读:
VS1053 datasheet 解读笔记
C# List Find方法
git push & git pull 推送/拉取指定分支
Python 匿名函数
Python 函数
java jdk安装与环境变量配置
Anroid开发环境配置
Asponse.Cell操作Excel
C#调试DeBug
Ext.gridPanel中内容对齐

原文地址：https://www.cnblogs.com/cblx/p/3828444.html