<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Mobile </title> of keyboard control layer
<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>
<body>
<div id= "div" ><span id= "Txt" ><p> Please press <font>↑</font>, <font>↓</font>, <font>←</font>, <font>→</font>,</p><p>
What's the effect of a try? </p></span></div>
<span id= "Layer1" > Control key Settings:<br>
Move Up:
<input name= "Up" type= "text" value= "↑" size= "6" ><br>
Move Down:
<input name= "Down" type= "text" value= "↓" size= "6" ><br>
Move Left:
<input name= "left" type= "text" value= "←" size= "6" ><br>
Move right:
<input name= "Right" type= "text" value= "→" size= "6" ><br>
Each move <input name= "int" type= "text" id= "int" value= "5" size= "4" maxlength= "3" >
Px;</span>
</body>
<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);
Left: 37:38 Right: 39 Next: 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 < | | Event.keycode >) && event.keycode!= 8 && event.keycode!=-&&am p;! (Event.keycode >= && 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> to <b> left </b> move </font>" + "+ int +" px. ";
Div.style.left = (parseint (div.currentStyle.left)-int) + "px";
if (parseint (div.style.left) <= 0)
{
Evet = "has been to the <font> leftmost </font>, can no longer <font> left </font> move." ";
Div.style.left = "0px";
break;
}
Break
}
Case up:{
Press = "<font>↑</font>";
Evet = "<font> to <b> on </b> move </font>" + "+ int +" px. ";
Div.style.top = (parseint (div.currentStyle.top)-int) + "px";
if (parseint (div.style.top) <= 0)
{
Evet = "has been to the top <font> </font>, can no longer <font> up </font> move." ";
Div.style.top = "0px";
break;
}
Break
}
Case right:{
Press = "<font>→</font>";
Evet = "<font> to <b> right </b> move </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 = "has been to the <font> rightmost </font>, can no longer <font> right </font> move." ";
break;
}
Break
}
Case down:{
Press = "<font>↓</font>";
Evet = "<font> to <b> under </b> move </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 = "has been to the <font> bottom </font>, can no longer <font> down </font> move." ";
break;
}
Break
}
Default
{
Return
}
}
str = "<p> You pressed" + press + "key,</p>";
STR + + "<p> the layer" + Evet;
txt.innerhtml = str;
}
}
-->
</script>
<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <title> keyboard control layer Mobile </title> <style type=" Text/css "> <!--#Div {Position:absol Ute 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> </pead> <body> <div id= "div" ><span id= "Txt" ><p> please press <FONT&G separately T;↑</font>, <font>↓</font>, <font>←</font>, <font>→</font>,</p> What's the effect of <p> try? </p></span></div> <span id= "Layer1" > Control key settings: Move up: <input name= "Up" type= "text" value= "↑" siz E= "6" > Move downward: <input name= "Down" type= "text" value= "↓" size= "6" > Move to the Left: <input name= "Ieft" type= "text" val Ue= "←" size= "6" > Moving to the right: <input name= "Right-hand" type= "text" value= "→" size= "6" > each move <input name= "Int" type= " Text "id=" Int "value=" 5 "size=" 4 "maxlength=" 3 "> px;</span> </body> </ptml> <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); Left: 37:38 Right: 39 under: 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.KEYC Ode = Document.body.focus (); if ((Event.keycode < | | Event.keycode >) && event.keycode!= 8 && event.keycode!=-&&am p;! (Event.keycode >= && event.keycode <= 40)) Event.returnvalue = false; Return else {switch (event.keycode) {case 37:{Event.srcElement.value = "←"; Break The 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> to <b> left </b> move </font>" + "+ int +" px. "; Div.style.left = (parseint (div.currentStyle.left)-int) + "px"; if (parseint (div.style.left) <= 0) {Evet = "has been to the <font> leftmost </font>, can no longer <font> left </font> Move. "; Div.style.left = "0px"; break; } break; Case up:{Press = "<font>↑</font>"; Evet = "<font> to <b> on </b> move </font>" + "+ int +" px. "; Div.style.top = (parseint (div.currentStyle.top)-int) + "px"; if (parseint (div.style.top) <= 0) {Evet = "has been to the top </font> of <font>, can no longer <font> up </font> move." "; Div.style.top = "0px"; break; } break; Case right:{Press = "<font>→</font>"; Evet = "<font> to <b> right </b> move </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.L EFT = parseint (document.body.clientWidth)-parseint (Div.offsetwidth); Evet = "has been to the <font> rightmost </font>, can no longer <font> right </font> move." "; break; } break; Case down:{Press = "<font>↓</font>"; Evet = "<font> to <b> under </b> move </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 = "has been to the <font> bottom </font>, can no longer <font> down </font> move." "; break; } break; } default: {return; } str = "<p> You pressed" + press + "key,</p>"; STR + + "<p> the layer" + Evet; txt.innerhtml = str; }}//--> </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
