键盘导航-优快云博客

本文链接：https://blog.youkuaiyun.com/zijie885/article/details/7379985
第一版

<HTML>  
<HEAD>  
<TITLE> New Document </TITLE>  
<style>  
.aaa{  
position:absolute;  
  
}  
</style>  
</HEAD>  
  
<BODY>  
<img id="p1" src="1.jpg" class="aaa" style="left:0px;top:100px;" width="50" height="50" />  
<img id="p2" src="2.jpg" class="aaa" style="left:0px;top:100px;display:none" width="50" height="50" />  
<script>  
  
$('p2').onmove = function(){  
 $('p1').style.display = 'none';  
}  
  
var bkCode = null;  
document.onkeydown = function(){  
 var kCode = event.keyCode;  
 var pleft = parseInt($("p2").style.left);  
 var ptop = parseInt($("p2").style.top);  
 if(bkCode == kCode || bkCode == null){  
  bkCode = kCode;  
  if(kCode == 37){  
   pleft -= 8;  
   pleft = modifyWidthStep(pleft);  
   $("p2").style.left = pleft;  
  }else if(kCode == 38){  
   ptop -= 8;   
   ptop = modifyHeightStep(ptop);  
   $("p2").style.top = ptop;  
  }else if(kCode == 39){  
   pleft += 8;  
   pleft = modifyWidthStep(pleft);  
   $("p2").style.left = pleft;  
  }else if(kCode == 40){  
   ptop += 8;   
   ptop = modifyHeightStep(ptop);  
   $("p2").style.top = ptop;  
  }  
  $('p2').style.display = 'inline';  
  $('p1').style.display = 'none';  
 }else{  
  if((bkCode==38 && kCode == 37) || (kCode == 38 && bkCode==37)){  
   pleft -= 8;  
   pleft = modifyWidthStep(pleft);  
   $("p2").style.left = pleft;  
   ptop -= 8;   
   ptop = modifyHeightStep(ptop);  
   $("p2").style.top = ptop;  
  }else if((bkCode==39 && kCode == 38) || (kCode == 39 && bkCode==38)){  
   ptop -= 8;   
   ptop = modifyHeightStep(ptop);  
   $("p2").style.top = ptop;  
   pleft += 8;  
   pleft = modifyWidthStep(pleft);  
   $("p2").style.left = pleft;  
  }else if((bkCode==40 && kCode == 39) || (kCode == 40 && bkCode==39)){  
   pleft += 8;  
   pleft = modifyWidthStep(pleft);  
   $("p2").style.left = pleft;  
   ptop += 8;   
   ptop = modifyHeightStep(ptop);  
   $("p2").style.top = ptop;  
  }else if((bkCode==37 && kCode == 40) || (kCode == 37 && bkCode==40)){  
   ptop += 8;   
   ptop = modifyHeightStep(ptop);  
   $("p2").style.top = ptop;  
   pleft -= 8;  
   pleft = modifyWidthStep(pleft);  
   $("p2").style.left = pleft;  
  }  
  $('p2').style.display = 'inline';  
  $('p1').style.display = 'none';  
 }  
   
   
}  
  
document.onkeyup = function(){  
 bkCode = null;  
 $('p2').style.display = 'none';  
 $('p1').style.display = 'inline';  
 $('p1').style.top = $('p2').style.top;  
 $('p1').style.left = $('p2').style.left;  
}  
  
function $(obbj){  
 return document.getElementById(obbj);  
}  
  
function modifyWidthStep(val){  
 if(val<0){  
  return 0;  
 }else if(val > document.body.clientWidth - $('p2').offsetWidth){  
  return document.body.clientWidth - $('p2').offsetWidth;  
 }else{  
  return val;  
 }  
}  
  
function modifyHeightStep(val){  
 if(val<0){  
  return 0;  
 }else if(val > document.body.clientHeight - $('p2').offsetHeight){  
  return document.body.clientHeight - $('p2').offsetHeight;  
 }else{  
  return val;  
 }  
}  
  
function vaild(val){  
 if(val<0){  
  return false;  
 }else{  
  return true;  
 }  
}  
</script>  
</BODY>  
</HTML>


修正版

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.aaa{
position:absolute;

}
</style>
</HEAD>

<BODY>
<img id="p1" src="1.jpg" class="aaa" style="left:0px;top:100px;" width="50" height="50" />
<img id="p2" src="2.jpg" class="aaa" style="left:0px;top:100px;display:none" width="50" height="50" />
<div id="aa">0000</div>
<script>
$('p2').onmove = function(){
 $('p1').style.display = 'none';
}
var codeArr = new Array();
document.onkeydown = function(){
 var kCode = event.keyCode;
 if(codeArr.length<2){
	if(codeArr.length != 1){
	  codeArr.push(kCode);
	}else if(codeArr[0] != kCode){
	  codeArr.push(kCode);
	}
 }
 var pleft = parseInt($("p2").style.left);
 var ptop = parseInt($("p2").style.top);
 if(codeArr.length < 2){
  if(kCode == 37){
   pleft -= 8;
   pleft = modifyWidthStep(pleft);
   $("p2").style.left = pleft;
  }else if(kCode == 38){
   ptop -= 8; 
   ptop = modifyHeightStep(ptop);
   $("p2").style.top = ptop;
  }else if(kCode == 39){
   pleft += 8;
   pleft = modifyWidthStep(pleft);
   $("p2").style.left = pleft;
  }else if(kCode == 40){
   ptop += 8; 
   ptop = modifyHeightStep(ptop);
   $("p2").style.top = ptop;
  }
  $('p2').style.display = 'inline';
  $('p1').style.display = 'none';
  $('aa').innerHTML=kCode +' ; '+codeArr[0]+','+codeArr[1]+"   --  "+codeArr.length;
 }else{
  if((codeArr[1]==38 && codeArr[0] == 37) || (codeArr[0] == 38 && codeArr[1]==37)){
   pleft -= 8;
   pleft = modifyWidthStep(pleft);
   $("p2").style.left = pleft;
   ptop -= 8; 
   ptop = modifyHeightStep(ptop);
   $("p2").style.top = ptop;
  }else if((codeArr[0]==39 && codeArr[1] == 38) || (codeArr[1] == 39 && codeArr[0]==38)){
   ptop -= 8; 
   ptop = modifyHeightStep(ptop);
   $("p2").style.top = ptop;
   pleft += 8;
   pleft = modifyWidthStep(pleft);
   $("p2").style.left = pleft;
  }else if((codeArr[1]==40 && codeArr[0] == 39) || (codeArr[0] == 40 && codeArr[1]==39)){
   pleft += 8;
   pleft = modifyWidthStep(pleft);
   $("p2").style.left = pleft;
   ptop += 8; 
   ptop = modifyHeightStep(ptop);
   $("p2").style.top = ptop;
  }else if((codeArr[1]==37 && codeArr[0] == 40) || (codeArr[0] == 37 && codeArr[1]==40)){
   ptop += 8; 
   ptop = modifyHeightStep(ptop);
   $("p2").style.top = ptop;
   pleft -= 8;
   pleft = modifyWidthStep(pleft);
   $("p2").style.left = pleft;
  }
  $('p2').style.display = 'inline';
  $('p1').style.display = 'none';
   $('aa').innerHTML=kCode +' ; '+codeArr[0]+','+codeArr[1]+"   --  "+codeArr.length;
 }
 
 
}

document.onkeyup = function(){
 if(event.keyCode == codeArr[0]){
	codeArr.shift();
 }else if(event.keyCode == codeArr[1]){
	codeArr.pop();
 }
 bkCode = null;
 $('p2').style.display = 'none';
 $('p1').style.display = 'inline';
 $('p1').style.top = $('p2').style.top;
 $('p1').style.left = $('p2').style.left;
 $('aa').innerHTML=kCode +' ; '+codeArr[0]+','+codeArr[1]+"   --  "+codeArr.length;
}

function $(obbj){
 return document.getElementById(obbj);
}

function modifyWidthStep(val){
 if(val<0){
  return 0;
 }else if(val > document.body.clientWidth - $('p2').offsetWidth){
  return document.body.clientWidth - $('p2').offsetWidth;
 }else{
  return val;
 }
}

function modifyHeightStep(val){
 if(val<0){
  return 0;
 }else if(val > document.body.clientHeight - $('p2').offsetHeight){
  return document.body.clientHeight - $('p2').offsetHeight;
 }else{
  return val;
 }
}

function vaild(val){
 if(val<0){
  return false;
 }else{
  return true;
 }
}
</script>
</BODY>
</HTML>
图片移动、切替
