zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    wepy框架构建小程序(1)
    百度地图2
    百度地图1
    VS Code 用户自定义代码片段(React)
    JS MarcoTasks MicroTasks
    JS位运算和遍历
    VueX源码分析(5)
    VueX源码分析(4)
    tensorflow 自带的实现函数翻转的函数
    namedtuple
  • 原文地址:https://www.cnblogs.com/cblx/p/3828444.html
Copyright © 2011-2022 走看看