<!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>无标题文档</title>
<style type="text/css">
div { border:1px solid #ccc;}
li{ list-style-type:none; height:40px; line-height:40px; font-size:24px; text-indent:12px;}
</style>
<script type="text/javascript">
var tmArray = [
"翻页DEMO-栏目1",
"翻页DEMO-栏目2",
"翻页DEMO-栏目3",
"翻页DEMO-栏目4",
"翻页DEMO-栏目5",
"翻页DEMO-栏目6",
"翻页DEMO-栏目7",
"翻页DEMO-栏目8",
"翻页DEMO-栏目9",
"翻页DEMO-栏目10",
"翻页DEMO-栏目11",
"翻页DEMO-栏目12",
"翻页DEMO-栏目13",
"翻页DEMO-栏目14"
];
var menu_Pos = 0;//每页条目的焦点
var menu_Num = 5;//每页条目的个数
function init(){
setTimeout("showTm();",200);
menuFocus(0);
}
function $(id){
return document.getElementByIdx(id);
}
function showTm(){
var position = parseInt((menu_Pos+menu_Num)/menu_Num-1)*menu_Num;//每一页的第一条
for(i=0;i<menu_Num;i++){
if(i+position>tmArray.length-1){
$("menu"+i).innerText = " ";
}
else {
$("menu"+i).innerText = tmArray[i+position];
}
}
}
function menuFocus(__num){
$("menu"+menu_Pos%menu_Num).style.backgroundColor = "#ffffff";
$("menu"+menu_Pos%menu_Num).style.color= "#000000";
menu_Pos+=__num;
if(menu_Pos<0)menu_Pos=0;
else if(menu_Pos>tmArray.length-1)menu_Pos=0;
if(parseInt((menu_Pos+menu_Num)/menu_Num)!=parseInt((menu_Pos-__num+menu_Num)/menu_Num)){
showTm();
}
$("menu"+menu_Pos%menu_Num).style.backgroundColor= "#5FA6ED";
$("menu"+menu_Pos%menu_Num).style.color= "#ffffff";
}
document.onkeypress = grabEvent;
document.onsystemevent = grabEvent;
document.onkeypress = grabEvent;
document.onirkeypress=grabEvent;
function grabEvent(){
var key_code = event.which;
switch(key_code){
case 1://up
case 269:
menuFocus(-1);
return 0;
break;
case 2://down
case 270:
menuFocus(1);
return 0;
break;
case 3://left
case 271: