jQuery学习：用按键移动方块

最新推荐文章于 2022-04-20 17:01:58 发布

weixin_30632089

最新推荐文章于 2022-04-20 17:01:58 发布

阅读量232

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cblx/p/3828444.html

版权

<!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>

转载于:https://www.cnblogs.com/cblx/p/3828444.html

weixin_30632089

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫