Linux Shell常用技巧(五)

<script language="javascript">
//键盘监听事件
document.onkeydown = onkey;
//五个按钮循环
var classIndex = 0 ;
var classCount = 5;

isselected = false;
var url = null;
function onkey(e)
{

ev = window.event ? event : e;
key = ev.which ? ev.which : ev.keyCode;
switch(key)
{
case 37://左

break;

case 39://右

break;

case 38: //上
if(classIndex>0){
classIndex = classIndex -1;
}else if(classIndex<=0){
classIndex = classCount - 1;
}
changeImgEvt();
isselected = false;
break;

case 40://下
if(classIndex<classCount-1){
classIndex += 1;
}else if(classIndex>=classCount-1){
classIndex = 0 ;
}
changeImgEvt();
isselected = false;
break;

case 13://选中链接地址
if(url!=null&&url!=''){
location.href = url;
}else{
location.href ="";
}

isselected = false;
break;

case 340:
iPanel.back();
break;

default:
isselected = false;
break;
}
}

function changeImgEvt(){
var sectFlag = false;
var c_index = classIndex + 1;

for(var i=0;i<5;i++){
$('menu'+(i+1)).style.visibility='hidden';
}
if(c_index==1){//选中第一个按钮
$('contextImg').src='换成图片1地址';
}else if(c_index==2){//选中第二个按钮
$('contextImg').src='换成图片2地址'';
}else if(c_index==3){//选中第三个按钮
$('contextImg').src='换成图片3地址'';
}else if(c_index==4){//选中第四个按钮
$('contextImg').src='换成图片4地址'';
}else if(c_index==5){//个选中第五个按钮
$('contextImg').src='换成图片5地址'';
}
$('menu'+c_index).style.visibility='visible';
sectFlag = true;
if(sectFlag){
goHrefPageEvt(c_index);
}

}

function goHrefPageEvt(c_index){

if(c_index==1){//跳转
url ="选中图片1将要跳转的地址";

}else if(c_index==2){//跳转
url ="选中图片2将要跳转的地址";
}else if(c_index==3){//休闲游戏
url ="选中图片3将要跳转的地址";
}else if(c_index==4){
url = "选中图片4将要跳转的地址";
}else if(c_index==5){
url ="";
}
}

function $(eleName){
return document.getElementById(eleName);
}
</script>

<div style="align:center;width:1280px;height:720px;border:0px solid red;">
<div style="width:1280px;height:720px;border:0px solid red;background-image: url('background.jpg');">
<div style="text-align:left;margin-left:112px;">
<table style="border:0px solid red;width:1100px;height:720px;">
<tr>
<td style="border:0px solid red;width:310px;">
<div style="margin-top:58px;">
“<img id="menu1" src="1.jpg"/>
</div>
<div style="margin-top:17px;">
<img id="menu2" src="2.jpg" style="visibility: hidden;"/>
</div>
<div style="margin-top:17px;">
<img id="menu3" src="3.jpg" style="visibility: hidden;"/>
</div>
<div style="margin-top:17px;">
<img id="menu4" src="4.jpg" style="visibility: hidden;"/>
</div>
<div style="margin-top:17px;">
<img id="menu5" src="5.jpg" style="visibility: hidden;"/>
</div>
</td>
<td style="border:0px solid red;vertical-align: top;">

<div style="margin-left:60px;margin-top:88px;">
<marquee  border="0" direction="left"  height="95px" width="660px" scrollDelay="50"  scrollamount="3"  style="padding: 0px;">
<font size="9px" color="white">滚动文字</font>
</marquee>

</div>
<div style="margin-left:60px;margin-top:10px;">
<img id="contextImg" src="1.jpg" />
<div>
</td>
</tr>
</table>
</div>
</div>
</div>