第一版
<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>