add: 键盘事件举例

2019-11-27 12:05:12 +08:00 · 2019-11-27 12:05:12 +08:00 · 1b108cb349
commit 1b108cb349
parent 97c21c682e
2 changed files with 91 additions and 4 deletions
--- a/03-CSS进阶/CSS开发积累.md
+++ b/03-CSS进阶/CSS开发积累.md
@ -44,10 +44,18 @@ CSS的逗号一般写在()里。**不同属性值之间，用的是空格**，
 可以看出，半角的宽度更小。考虑到容器的空间一般比较紧张，所以推荐使用**半角**。


-
-
-
 ### 2019-11-19-鼠标悬停时，弹出提示文字

 参考链接：[css实现鼠标悬浮后的提示效果](https://www.cnblogs.com/zhaojian-08/p/10074660.html)

+
+### 2019-11-27-图片的宽度固定，高度自适应
+
+这个场景下，别用background。直接放img元素就好了，将图片的高度设置为`auto`。
+
+
+
+
+
+
+
--- a/04-JavaScript基础/30-键盘事件.md
+++ b/04-JavaScript基础/30-键盘事件.md
@ -111,7 +111,86 @@
 ```


-## 举例
+## 举例：通过键盘的方向键，移动盒子
+
+代码实现：
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title></title>
+        <style type="text/css">
+            #box1 {
+                width: 100px;
+                height: 100px;
+                background-color: red;
+                position: absolute;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="box1"></div>
+
+        <script type="text/javascript">
+            // 使div可以根据不同的方向键向不同的方向移动
+            /*
+             * 按左键，div向左移
+             * 按右键，div向右移
+             * ...
+             */
+
+            //为document绑定一个按键按下的事件
+            document.onkeydown = function(event) {
+                event = event || window.event;
+
+                //定义一个变量，来表示移动的速度
+                var speed = 10;
+
+                //当用户按了ctrl以后，速度加快
+                if (event.ctrlKey) {
+                    console.log('smyhvae ctrl');
+                    speed = 20;
+                }
+
+                /*
+                 * 37 左
+                 * 38 上
+                 * 39 右
+                 * 40 下
+                 */
+                switch (event.keyCode) {
+                    case 37:
+                        //alert("向左"); left值减小
+                        box1.style.left = box1.offsetLeft - speed + 'px'; // 在初始值的基础之上，减去 speed 大小
+                        break;
+                    case 39:
+                        //alert("向右");
+                        box1.style.left = box1.offsetLeft + speed + 'px';
+                        break;
+                    case 38:
+                        //alert("向上");
+                        box1.style.top = box1.offsetTop - speed + 'px';
+                        break;
+                    case 40:
+                        //alert("向下");
+                        box1.style.top = box1.offsetTop + speed + 'px';
+                        break;
+                }
+            };
+        </script>
+    </body>
+</html>
+
+
+```
+
+上方代码，待改进的地方：
+
+（1）移动盒子时，如果要加速，需要先按`方向键`，再按`Ctrl键`。
+
+（2）首次移动盒子时，动作较慢。后续如果学习了定时器相关的内容，可以再改进。


 ## 我的公众号