您的位置：首页 > Web前端 > JavaScript

js:仿xp菜单风格

2009-01-11 22:25 387 查看

由于项目需要，做了一个js：当在一级菜单上按左右键时二级菜单将随着变化。此js用于机顶盒上的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>portal2</title>
</head>
<script type="text/javascript">
var main_id = 1;
var total = 6;
document.onkeydown=grabEvent;
function grabEvent(e){
var keycode;
if(!window.event)
keycode=e.which;
else
keycode=event.keyCode;

switch (keycode) {
case 65361:
onLeft();//向左
break;
case 65363:
onRight();//向右
break;

case 37:
onLeft();//向左
break;
case 39:
onRight();//向右
break;

}
}
function onLeft(){
main_id = parseInt(document.getElementById('now_id').value)-1;
if (main_id==0){
}
else{
show_upinfo(main_id);
}
}
function onRight(){
main_id = parseInt(document.getElementById('now_id').value)+1;
if (main_id==total){
}
else{
show_downinfo(main_id);
}
}
function show_upinfo(main_id){
document.getElementById('now_id').value=main_id;
var pass_id = main_id+1;
document.getElementById('div'+pass_id).style.visibility = 'hidden';
document.getElementById('div'+main_id).style.visibility = 'visible';
}
function show_downinfo(main_id){
document.getElementById('now_id').value=main_id;
var pass_id = main_id-1;
document.getElementById('div'+pass_id).style.visibility = 'hidden';
document.getElementById('div'+main_id).style.visibility = 'visible';
}
</script>
<body>
<input type="hidden" id="now_id" value="1" />
<table width="495" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" ><img src="images/b1.gif" name="Image4" width="99" height="85" border="0" id="Image4" /></a></td>
<td ><a href="#"><img src="images/b2.gif" name="Image5" width="99" height="85" border="0" id="Image5" /></a></td>
<td><a href="#" ><img src="images/b3.gif" name="Image6" width="99" height="85" border="0" id="Image6" /></a></td>
<td><a href="#" ><img src="images/b4.gif" name="Image7" width="99" height="85" border="0" id="Image7" /></a></td>
<td ><a href="#" ><img src="images/b5.gif" name="Image8" width="99" height="85" border="0" id="Image8" /></a></td>
</tr>
<tr>
<td><div id="div1" style="visibility:visible">
<ul>
<a href="#">包月点播</a>
<a href="#">按次点播</a>
<a href="#">免费点播</a>
</ul>
</div></td>
<td><div id="div2" style="visibility:hidden">
<ul>
<a href="#">公告列表</a>
</ul>
</div></td>
<td><div id="div3" style="visibility:hidden">
<ul>
<a href="#">最新最热</a>
</ul>
</div></td>
<td><div id="div4" style="visibility:hidden">
<ul>
<a href="#">我的收藏</a>
</ul>
</div></td>
<td><div id="div5" style="visibility:hidden">
<ul>
<a href="#">万年历</a>
</ul>
</div></td>
</tr>
</table>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： xp js 休闲菜单风格

相关文章推荐

新的分享

章节导航