87,907
社区成员
发帖
与我相关
我的任务
分享这个应该怎么实现呢？
在网页里我放了一个表格，表格的单元格中放图片，我想实现的效果是：通过按键盘的方向键，将焦点移动到制定位置，并且图片突出显示，不知道怎么实现，谢谢。
...全文
请发表友善的回复…
发表回复
峭沙 2011-10-09
- 打赏
- 举报
通过键盘事件监听按键，再然后通过tabIndex来移动，图片突出显示用css实现。。
寒江易雪_王孙 2011-10-09
- 打赏
- 举报
这样可能网页会刷新,,用ajax实现吧
峭沙 2011-10-09
- 打赏
- 举报
上面有点笔误，最好把keypress换成keyup
峭沙 2011-10-09
- 打赏
- 举报
思路有了还不会写。。
给分吧同学。。
<html>
<head>
<script src="jquery.js"></script>
<style>
td div{
border: 1px solid red;
width: 50px;
height: 50px;
}
td.highlight div {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>
<script>
var $td = $('table').find('td').first().addClass('highlight');
$(document).keypress(function(event){
switch(event.keyCode){
case 37:
if($td.prev().length !== 0){
$td = $td.removeClass('highlight').prev().addClass('highlight');
}
break;
case 38:
var $tr = $td.parent().prev();
if($tr.length !== 0){
var index = $td.index();
$td.removeClass('highlight');
$td = $tr.children().eq(index).addClass('highlight');
}
break;
case 39:
if($td.next().length !== 0){
$td = $td.removeClass('highlight').next().addClass('highlight');
}
break;
case 40:
var $tr = $td.parent().next();
if($tr.length !== 0){
var index = $td.index();
$td.removeClass('highlight');
$td = $tr.children().eq(index).addClass('highlight');
}
break;
}
});
</script>
</body>
</html>给分吧同学。。
BLUE_LG 2011-10-09
- 打赏
- 举报
table.onkeyup=function(){
在这里判断keyCode,并操作。。。
}
在这里判断keyCode,并操作。。。
}
misssdf 2011-10-09
- 打赏
- 举报
不会写。。。
