实验项目 - 键盘快捷方式 #43
Description
以下来自 @Liu-Ameng 同学的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF8"/>
<title>Menu</title>
<script language="javascript">
var menu_select = 1;
var menu_max = 10;
var $=function(id){
return document.getElementById(id);
}
function doKeydown(e){
var e = e||event;
var currKey=e.keyCode||e.which||e.charCode;
//alert(currKey);
if(currKey == 38 || currKey == 75){
if(menu_select>1){
menu_select = menu_select - 1;
}
}else if(currKey == 40 || currKey == 74){
if(menu_select<10){
menu_select = menu_select + 1;
}
}
for(var i = 1;i<=menu_max;++i){
if(i == menu_select){
$("m"+i).style.backgroundColor="#eeeeee";
}else{
$("m"+i).style.backgroundColor="#aaaaaa";
}
}
}
document.onkeydown = doKeydown;
</script>
</head>
<body>
<div id="m1" style=" width:100px; height:20px; border:solid 1px black;">m1;</div>
<div id="m2" style=" width:100px; height:20px; border:solid 1px black;">m2;</div>
<div id="m3" style=" width:100px; height:20px; border:solid 1px black;">m3;</div>
<div id="m4" style=" width:100px; height:20px; border:solid 1px black;">m4;</div>
<div id="m5" style=" width:100px; height:20px; border:solid 1px black;">m5;</div>
<div id="m6" style=" width:100px; height:20px; border:solid 1px black;">m6;</div>
<div id="m7" style=" width:100px; height:20px; border:solid 1px black;">m7;</div>
<div id="m8" style=" width:100px; height:20px; border:solid 1px black;">m8;</div>
<div id="m9" style=" width:100px; height:20px; border:solid 1px black;">m9;</div>
<div id="m10" style=" width:100px; height:20px; border:solid 1px black;">m10;</div>
</body>
</html>目测基本的上下移动是可以执行的。增加一些场景：
- 一般文章的 div 容器比较高，多篇文章垂直排列的时候经常需要滚动屏幕。要求：假定初始化『活动的』div为首个div，位于页面的最上方。当向下拖动滚动条使得该div完全跑出页面的时候，下一个div被激活（也就是以前活动的变为非活动状态，而当前变为活动状态。以下激活含义相同）。
- 当鼠标滑过某个div的时候，该div被激活。
- 当仅有键盘操作的时候，向下激活某个div，其处于屏幕可见区域以外的位置，则应当触发屏幕滚动的效果，使其出现在屏幕可见区域内。