js:仿xp菜单风格

由于项目需要,做了一个js:当在一级菜单上按左右键时二级菜单将随着变化。此js用于机顶盒上的。
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " [url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns=" [url]http://www.w3.org/1999/xhtml[/url]">
<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>

你可能感兴趣的:(js,XP,菜单,风格,休闲)