JS實現鍵盤移動光標

         通過鍵盤的上下左右，實現對光標的移動，當點擊回車時，進入所選的對應頁面。左邊是菜單欄，右邊是具體數據。

左邊的菜單欄佈局

右邊的具體數據局部

1、先查找到菜單欄所以元素

   function dh_method(){

                    alert("菜單欄加載");
                    var my_dz=0;//右移動時改變值，從而將左邊的光標取消，右邊的光標設置（my_dz=1時）

                    var baseIndex = 10;//初始值

                    var li_sum=$("#div_dh ul").find("li").size();
                    $("#div_dh").find("li").each(function(li) {
                   $(this).find("a")
                                .attr("tabindex", li * 10 + baseIndex).attr("my_li",li )
                                .addClass("cGridInputs");
                 //alert("當前位置:"+li+"列");

                                     });//li==結束位置

                      if(my_dz==0){
                   $(".cGridInputs[tabindex=" + 10 + "]").focus() ;
}

 2、菜單欄的鍵盤控制

 $("#div_dh .cGridInputs").keydown( function(evt) {
   var tabIndex = parseInt($(this).attr("tabindex"));
  var my_lis = parseInt($(this).attr("my_li"));
    switch (evt.which) {
   case 40: //下---------------------
      if( my_lis==9){//最後一個
    return;
  }
      my_lis++;
        tabIndex = my_lis*10+ baseIndex;
                    break;
case 38: //上---------------------
        if( my_lis==0){//第一個
    return;
  }
      my_lis--;
        tabIndex = my_lis*10+ baseIndex;
 break;
case 39: //右---------------------
   //   $(".cGridInput[tabindex=" + 10 + "]").blur();
      my_dz=1;
 break;
   case 13:
    /*  alert("確定進入所選菜單--座標:"+my_lis);
  var url= $("ul li:eq("+my_lis+")").find("a").attr("href");
  alert("菜單鏈接: "+url);
  window.location.href=url;*/
break;
 
   };
if(my_dz==0){    
   $(".cGridInputs[tabindex=" + tabIndex + "]").focus() ;
      var distance =  my_lis*(40+0)+50+'px';
         $('.lanrenzhijia .hover').stop().animate({top:distance},150);
}
    if(my_dz==1){

 $(".cGridInputs[tabindex=" + tabIndex + "]").blur();
   zt_method();  //  當點擊右時，從左邊將移動到右邊，調用右邊移動的函數
return;

}

 });
};

3、右邊頁面的查找與控制

function zt_method(){
alert("主體加載");
 var baseIndex = 10;//初始值
var my_list;
 var my_li;
 var arrays = [];
 var my_dz=0;
  var rows=$("#list ").size();//總行數
   $("#list ").each(function(list) {
      
arrays.push({"list":list,"li":  $(this).find("li").size()});
// alert("list-第: "+list+"行;"+"li-總："+$(this).find("li").size()+"張");
      $(this).find("li").each(function(li) {
  $(this).find("img")
               .attr("tabindex", list * 10 + li + baseIndex).attr("my_list", list ).attr("my_li",li )
  .addClass("cGridInput");
//  alert("當前位置:"+list+"行"+li+"列");

            });//li==結束位置

       });//子div==結束位置
 
 

   if(my_dz==0){
$(".cGridInput[tabindex=" + 10 + "]").focus();
$(".div_right #list:eq(0) li:eq(0)").addClass("mybg");
localStorage.clear();
}
    
$("#list .cGridInput").keydown( function(evt) {
   var tabIndex = parseInt($(this).attr("tabindex"));
var my_lists = parseInt($(this).attr("my_list"));
       var my_lis = parseInt($(this).attr("my_li"));
var column = 0;//列總數
               switch (evt.which) {
                case 38: //上---------------------
if ( my_lists == 0){
                          return;
  }
my_lists -= 1;
     $.each(arrays,function(index,value) {
 if(my_lists == value.list){
 column = value.li;
     return;
 }
      });
         
if (my_lis > column-1) {
                         my_lis = column-1;
                     }
  tabIndex =   my_lists * 10 +my_lis + baseIndex;
                    break;
                case 40: //下---------------------
                  
if (my_lists == rows-1) { //已經是最後一行
                         return;
                      }
my_lists   += 1;
$.each(arrays,function(index,value) {
 if(my_lists == value.list){
column = value.li; 
    return;
 }
      });
  
if (my_lis > column-1) {
                         my_lis = column-1;
                     }
          tabIndex =  my_lists * 10 +my_lis + baseIndex;
                    break;
                case 37: //左移---------------------
if (my_lists == 0 && my_lis == 0) {  //第一行第一個,跳轉到菜單------------------------
   //跳到菜單---------------
my_dz=1;

                          //return;
                       }
  if(my_lis == 0){
  my_lists--;
 $.each(arrays,function(index,value) {
       if(my_lists == value.list){
       column = value.li; 
           return;
        }
             });
           
 my_lis=column-1; 
 tabIndex=tabIndex-10+my_lis;
  }else{
tabIndex--; 
my_lis--;
  }

                    break;
                case 39: //右---------------------
                        
$.each(arrays,function(index,value) {
 if(my_lists == value.list){
column = value.li; 

    return;
 }
      });
 
if (my_lists == rows-1 && my_lis == column-1) {  //最後行最後一個,跳轉到第一個
                         my_lists =0 ;
my_lis= 0;
  break;
 
                       }
if(my_lis == column-1){
 my_lists++;
 my_lis=0; 
 
 tabIndex=tabIndex+10-(column-1);
 
  }
  else{ 
tabIndex++; 
my_lis++;
  }

                    break;

  case 13:
      alert("確定進入觀看--座標:"+my_lists+"  ,  "+my_lis);
  var url= $("#div_index #list:eq("+my_lists+") li:eq("+my_lis+")").find("a").attr("href");
  alert("電影超鏈接: "+url);
  window.location.href=url;
break;
 
      };
     //改變選擇的顏色--------------------------------
    if(my_dz==0){
    alert(my_lists+"行,列"+my_lis+"=="+tabIndex+"光標");
$(".div_right #list li").removeClass("mybg");
       $(".div_right #list:eq("+my_lists+") li:eq("+my_lis+")").addClass("mybg");
   $(".cGridInput[tabindex=" + tabIndex + "]").focus();
}
if(my_dz==1){
 $(".cGridInput[tabindex=" + tabIndex + "]").blur();
 $(".div_right #list li").removeClass("mybg");
 dh_method();
 return;
} 

   });//按鍵==結束位置
  };

4、實現效果圖

5、個人總結與優化

     這是一個頁面的實現，框架與框架的嵌套佈局，將分別寫菜單的js與具體數據的js，關鍵在於跨頁面的框架js之間的調用，正在完善一些問題。本人處學者，有問題就多交流