键盘控制层的移动javascript

< html >  
< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />  
< title > 键盘控制层的移动 </ title >  
< style  type ="text/css" >  
<!-- 
#Div  {  
position : absolute ;  
width : 238px ;  
height : 135px ;  
left : expression((body.clientWidth - this.offsetWidth)/2) ;  
top : expression((body.clientHeight - this.offsetHeight)/2) ;  
z-index : 1 ;  
text-align : center ;  
background : #AFDBFF ;  
border : #006699 1px solid ;  
}  
#Txt {  
font-size : 9pt ;  
position : absolute ;  
width : 200px ;  
top : expression((Div.offsetHeight - this.offsetHeight)/2) ;  
left : expression((Div.offsetWidth - this.offsetWidth)/2) ;  
}  
#Txt p {  
font-size : 9pt ;  
margin : 8px ;  
}  
#Txt font {  
color : #FF0000 ;  
font-size : 9pt ;  
}  
#Layer1  {  
border : #006699 1px solid ;  
padding : 10px ;  
font-size : 9pt ;  
color : #336699 ;  
position : absolute ;  
top : expression((body.clientHeight - this.offsetHeight)/2) ;  
left : expression((body.clientWidth - this.offsetWidth)/2 + Div.offsetWidth) ;  
}  
#Layer1 Input  {  
font-size : 9pt ;  
color : #336699 ;  
}  
#Int  {  
text-align : right ;  
}  
--> 
</ style >  
</ head >  
< body >  
< div  id ="Div" >< span  id ="Txt" > 请分别按下  < font > ↑ </ font > 、 < font > ↓ </ font > 、 < font > ← </ font > 、 < font > → </ font > ， 
试试看有什么效果？  </ span ></ div >  
< span  id ="Layer1" > 控制键设置:
 
向上移动: 
< input  name ="Up"  type ="text"  value ="↑"  size ="6" >
 
向下移动: 
< input  name ="Down"  type ="text"  value ="↓"  size ="6" >
 
向左移动: 
< input  name ="Left"  type ="text"  value ="←"  size ="6" >
 
向右移动: 
< input  name ="Right"  type ="text"  value ="→"  size ="6" >
 
每次移动   < input  name ="Int"  type ="text"  id ="Int"  value ="5"  size ="4"  maxlength ="3" >  
px; </ span >  
</ body >  
</ html >  
< script  language ="javascript" >  
<!--  
// alert(txt.style.top); 
var  up,down,left,right; 
up  =   38 ; 
down  =   40 ; 
left  =   37 ; 
right  =   39 ; 
function  document.onkeydown() 
{ 
//  alert(event.keyCode); 
// 左：37 上：38 右：39 下：40 
var   int ; 
int   =  parseInt(document.getElementById( " Int " ).value); 
if ( int   ==   " NaN " ) 
   int   =   5 ; 
var  str  =   "" ,press,evet; 
var  div  =  document.getElementById( " Div " ); 
var  txt  =  document.getElementById( " Txt " ); 
if (event.srcElement.tagName  ==   " INPUT " ) 
{ 
   if (event.srcElement  ==  document.getElementById( " Int " )) 
  { 
   if (event.keyCode  ==   13 ) 
    document.body.focus(); 
   if ((event.keyCode  <   96   ||  event.keyCode  >   105 )  &&  event.keyCode  !=   8   &&  event.keyCode  !=   46   &&   ! (event.keyCode  >=   37   &&  event.keyCode  <=   40 ) ) 
    event.returnValue  =   false ; 
     return ; 
  } 
   else  
  { 
   switch (event.keyCode) 
  { 
     case   37 :{ 
    event.srcElement.value  =   " ← " ; 
     break ; 
    } 
     case   38 :{ 
    event.srcElement.value  =   " ↑ " ; 
     break ; 
    } 
     case   39 :{ 
    event.srcElement.value  =   " → " ; 
     break ; 
    } 
     case   40 :{ 
    event.srcElement.value  =   " ↓ " ; 
     break ; 
    } 
  } 
   switch (event.srcElement) 
  { 
     case  document.getElementById( " Up " ):{ 
    up  =  event.keyCode; 
     break ; 
    } 
     case  document.getElementById( " Down " ):{ 
    down  =  event.keyCode; 
     break ; 
    } 
     case  document.getElementById( " Left " ):{ 
    left  =  event.keyCode; 
     break ; 
    } 
     case  document.getElementById( " Right " ):{ 
    right  =  event.keyCode; 
     break ; 
    } 
  } 
  } 
} 
else  
{ 
   switch (event.keyCode) 
  { 
   case  left:{ 
  press  =   " <font> ← </font> " ; 
  evet  =   " <font>向 <b>左</b> 移动</font> "   +   "   "   +   int   +   "  px 。 " ; 
  div.style.left  =  (parseInt(div.currentStyle.left)  -   int )  +   " px " ; 
   if (parseInt(div.style.left)  <=   0 ) 
  { 
    evet  =   " 已经到了 <font>最左边</font> ，无法再 <font>向左</font> 移动。 " ; 
    div.style.left  =   " 0px " ; 
     break  ; 
  } 
   break ; 
  } 
   case  up:{ 
  press  =   " <font> ↑ </font> " ; 
  evet  =   " <font>向 <b>上</b> 移动</font> "   +   "   "   +   int   +   "  px 。 " ; 
  div.style.top  =  (parseInt(div.currentStyle.top)  -   int )  +   " px " ; 
   if (parseInt(div.style.top)  <=   0 ) 
  { 
    evet  =   " 已经到了 <font>最上边</font> ，无法再 <font>向上</font> 移动。 " ; 
    div.style.top  =   " 0px " ; 
     break  ; 
  } 
   break ; 
  } 
   case  right:{ 
  press  =   " <font> → </font> " ; 
  evet  =   " <font>向 <b>右</b> 移动</font> "   +   "   "   +   int   +   "  px 。 " ; 
  div.style.left  =  (parseInt(div.currentStyle.left)  +   int )  +   " px " ; 
   if (parseInt(div.style.left)  >=  (parseInt(document.body.clientWidth)  -  parseInt(div.offsetWidth))) 
  { 
    div.style.left  =  parseInt(document.body.clientWidth)  -  parseInt(div.offsetWidth); 
    evet  =   " 已经到了 <font>最右边</font> ，无法再 <font>向右</font> 移动。 " ; 
     break  ; 
  } 
   break ; 
  } 
   case  down:{ 
  press  =   " <font> ↓ </font> " ; 
  evet  =   " <font>向 <b>下</b> 移动</font> "   +   "   "   +   int   +   "  px 。 " ; 
  div.style.top  =  (parseInt(div.currentStyle.top)  +   int )  +   " px " ; 
   if (parseInt(div.style.top)  >=  (parseInt(document.body.clientHeight)  -  parseInt(div.offsetHeight))) 
  { 
    div.style.top  =  parseInt(document.body.clientHeight)  -  parseInt(div.offsetHeight); 
    evet  =   " 已经到了 <font>最下边</font> ，无法再 <font>向下</font> 移动。 " ; 
     break  ; 
  } 
   break ; 
  } 
   default : 
  { 
   return ; 
  } 
  } 
  str  =   " 您按下了 "   +  press  +   " 键， " ; 
  str  +=   " 该图层 "   +  evet; 
  txt.innerHTML  =  str; 
} 
} 
// --> 
</ script >

该文章转载自脚本之家：http://www.jb51.net/html/200704/23/9534.htm