键盘移动 div

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="jquery-3.2.1.min.js"></script>
 7     <style>
 8         #div{
 9              100px;
10             height: 100px;
11             position: absolute;
12         }
13     </style>
14 </head>
15 <body>
16 <h2>单击改变透明度加边框改变透明度
17 </h2>
18   <p>一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆
19       一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆
20       一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆一堆</p>
21 <div id="div"></div>
22 </body>
23 <script>
24     $('p').hover(function(){
25         $('p').css({background:'yellow'})
26     },function(){
27         $('p').css({background:'#fff'})
28     });
29     $('h2').click(function(){
30         $('h2').animate({opacity:'0.25',marginLeft:'20px'},'slow',function(){
31             $('h2').css({
32                 opacity:'0.5'
33             })
34         })
35     });
36     var o=$('#div');
37     o.css({
38         background:'yellow'
39     });
40 
41 
42     $(document).keyup(function(w){
43         var key= w.keyCode;
44         var l=o.offset().left;
45         var t=o.offset().top;
46         console.log(l+'---'+t);
47         switch (key) {
48             case 37:
49                 o.animate({left:l-20},'slow');//需要捕捉一个当前位置 保存为新的数值 每次按键刷新（前一天的想法，后来秒破了 简直智障 很怀疑自己是否可以坐着一行 感觉逻辑思维很要命啊）
50                 break;
51             case 38:
52                 o.animate({top:t-20},'slow');
53                 break;
54             case 39:
55                 o.animate({left:l+20},'slow');
56                 break;
57             case 40:
58                 o.animate({top:t+20},'slow');
59                 break;
60         }
61 //        if(key===37){
62 //            o.animate({left:l-20},'slow');
63 //        }else if(key===38){
64 //            o.animate({top:t-20},'slow');
65 //        }else if(key===39){
66 //            o.animate({left:l+20},'slow');
67 //        }else if(key===40){
68 //            o.animate({top:t+20},'slow');
69 //        }
70     })
71 </script>
72 </html>

ok！我应该把代码查到下边！但是为了加快进度。所以不做修改了马勒基谢谢思密达！

这一部分是自己做的练习通过jQuery的animate来实现div根据按键移动。

尝试了两种判断方法，switch和if else，真心感觉是switch比if快一些！是我的错觉么？?

下面列出在网上找到别的博主div的移动用的是css，这里还要说一点我下面将加粗加大字体

当position： relative时发现上下按键移动出问题上也向下移动大概一个一个div块这么大，下移动两个div块那么大。

而position ：absolute 时没有这种现象正常移动此时大胆假设！！！（absolute是绝对定位，而relative是相对定位，所以可能和我设置div的父元素定位有关系……好吧我很懒这里没做测试以后再表）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>键盘控制div移动</title>
    <style>
        div{100px;height:100px;background:red;position:absolute;}
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(document).keydown(function(ev){
            var l=$("div").offset().left;
            var t=$("div").offset().top;
            if(ev.which==39){
                $("div").css("left",(l+10));
            }
            if(ev.which==37){
                $("div").css("left",(l-10));
            }
            if(ev.which==38){
                $("div").css("top",(t-10));
            }
            if(ev.which==40){
                $("div").css("top",(t+10));
            }
        });
    </script>
</head>
<body>
<div></div>
</body>
</html>

补充：

alert($('div').width()); //不包含 padding border与大小有关
alert($('div').innerWidth()); //包含内边距 padding
alert($('div').outerWidth()); //包含内边距 padding+边框 border
alert($('div').outerWidth(true)); //包含内边距 padding+边框 border+外边距 margin

排版有很大问题，估计即使被访问也会瞬间关掉！以后要改正！