数字电视应用DEMO---之翻页效果（转）

Blex 2011-03-11

展开全文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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:
            return 0;
            break;
        case 4://right
        case 272:
            return 0;
            break;
        case 13:
            return 0;
            break;
        case 340://back
        case 283:
            return 0;
            break;
    }
}
</script>
</script>
</head>

<body onload="init();">

<div style="position:absolute; width:600px; height:500px; left:20px; top:10px; z-index:0;">
    <p style="font-size:30px; color:#39F; text-align:center">翻页效果</p>
    <ul>
        <li id="menu0"></li>
        <li id="menu1"></li>
        <li id="menu2"></li>
        <li id="menu3"></li>
        <li id="menu4"></li>
    </ul>
</div>
</body>
</html>