webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: 键盘事件举例

Browse Source
This commit is contained in:
qianguyihao 2019-11-27 12:05:12 +08:00
parent 97c21c682e
commit 1b108cb349
2 changed files with 91 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
03-CSS进阶/CSS开发积累.md
View File

@ -44,10 +44,18 @@ CSS的逗号一般写在()里。**不同属性值之间，用的是空格**，
可以看出，半角的宽度更小。考虑到容器的空间一般比较紧张，所以推荐使用**半角**。 可以看出，半角的宽度更小。考虑到容器的空间一般比较紧张，所以推荐使用**半角**。
### 2019-11-19-鼠标悬停时，弹出提示文字 ### 2019-11-19-鼠标悬停时，弹出提示文字
参考链接：[css实现鼠标悬浮后的提示效果](https://www.cnblogs.com/zhaojian-08/p/10074660.html) 参考链接：[css实现鼠标悬浮后的提示效果](https://www.cnblogs.com/zhaojian-08/p/10074660.html)
### 2019-11-27-图片的宽度固定，高度自适应
这个场景下，别用background。直接放img元素就好了，将图片的高度设置为`auto`。

81
04-JavaScript基础/30-键盘事件.md
View File

@ -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）首次移动盒子时，动作较慢。后续如果学习了定时器相关的内容，可以再改进。
## 我的公众号 ## 我的公众号