javascript下用鍵盤(pán)控制層的移動(dòng)的代碼
更新時(shí)間：2007年04月18日 00:00:00 作者：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鍵盤(pán)控制層的移動(dòng)</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"><p>請(qǐng)分別按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>，</p><p>
試試看有什么效果？ </p></span></div>
<span id="Layer1">控制鍵設(shè)置:<br>
向上移動(dòng):
<input name="Up" type="text" value="↑" size="6"><br>
向下移動(dòng):
<input name="Down" type="text" value="↓" size="6"><br>
向左移動(dòng):
<input name="Left" type="text" value="←" size="6"><br>
向右移動(dòng):
<input name="Right" type="text" value="→" size="6"><br>
每次移動(dòng) <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> 移動(dòng)</font>" + " " + int + " px 。";
div.style.left = (parseInt(div.currentStyle.left) - int) + "px";
if(parseInt(div.style.left) <= 0)
{
evet = "已經(jīng)到了 <font>最左邊</font> ，無(wú)法再 <font>向左</font> 移動(dòng)。";
div.style.left = "0px";
break ;
}
break;
}
case up:{
press = "<font> ↑ </font>";
evet = "<font>向 <b>上</b> 移動(dòng)</font>" + " " + int + " px 。";
div.style.top = (parseInt(div.currentStyle.top) - int) + "px";
if(parseInt(div.style.top) <= 0)
{
evet = "已經(jīng)到了 <font>最上邊</font> ，無(wú)法再 <font>向上</font> 移動(dòng)。";
div.style.top = "0px";
break ;
}
break;
}
case right:{
press = "<font> → </font>";
evet = "<font>向 <b>右</b> 移動(dòng)</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 = "已經(jīng)到了 <font>最右邊</font> ，無(wú)法再 <font>向右</font> 移動(dòng)。";
break ;
}
break;
}
case down:{
press = "<font> ↓ </font>";
evet = "<font>向 <b>下</b> 移動(dòng)</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 = "已經(jīng)到了 <font>最下邊</font> ，無(wú)法再 <font>向下</font> 移動(dòng)。";
break ;
}
break;
}
default:
{
return;
}
}
str = "<p>您按下了" + press + "鍵，</p>";
str += "<p>該圖層" + evet;
txt.innerHTML = str;
}
}
//-->
</script>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鍵盤(pán)控制層的移動(dòng)</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"><p>請(qǐng)分別按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>，</p><p>
試試看有什么效果？ </p></span></div>
<span id="Layer1">控制鍵設(shè)置:<br>
向上移動(dòng):
<input name="Up" type="text" value="↑" size="6"><br>
向下移動(dòng):
<input name="Down" type="text" value="↓" size="6"><br>
向左移動(dòng):
<input name="Left" type="text" value="←" size="6"><br>
向右移動(dòng):
<input name="Right" type="text" value="→" size="6"><br>
每次移動(dòng) <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> 移動(dòng)</font>" + " " + int + " px 。";
div.style.left = (parseInt(div.currentStyle.left) - int) + "px";
if(parseInt(div.style.left) <= 0)
{
evet = "已經(jīng)到了 <font>最左邊</font> ，無(wú)法再 <font>向左</font> 移動(dòng)。";
div.style.left = "0px";
break ;
}
break;
}
case up:{
press = "<font> ↑ </font>";
evet = "<font>向 <b>上</b> 移動(dòng)</font>" + " " + int + " px 。";
div.style.top = (parseInt(div.currentStyle.top) - int) + "px";
if(parseInt(div.style.top) <= 0)
{
evet = "已經(jīng)到了 <font>最上邊</font> ，無(wú)法再 <font>向上</font> 移動(dòng)。";
div.style.top = "0px";
break ;
}
break;
}
case right:{
press = "<font> → </font>";
evet = "<font>向 <b>右</b> 移動(dòng)</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 = "已經(jīng)到了 <font>最右邊</font> ，無(wú)法再 <font>向右</font> 移動(dòng)。";
break ;
}
break;
}
case down:{
press = "<font> ↓ </font>";
evet = "<font>向 <b>下</b> 移動(dòng)</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 = "已經(jīng)到了 <font>最下邊</font> ，無(wú)法再 <font>向下</font> 移動(dòng)。";
break ;
}
break;
}
default:
{
return;
}
}
str = "<p>您按下了" + press + "鍵，</p>";
str += "<p>該圖層" + evet;
txt.innerHTML = str;
}
}
//-->
</script>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- JavaScript利用鍵盤(pán)碼控制div移動(dòng)
- js實(shí)現(xiàn)上下左右鍵盤(pán)控制div移動(dòng)
- JS實(shí)現(xiàn)盒子跟著鼠標(biāo)移動(dòng)及鍵盤(pán)方向鍵控制盒子移動(dòng)效果示例
- angularjs利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤(pán)的示例
- 原生js實(shí)現(xiàn)鍵盤(pán)控制div移動(dòng)且解決停頓問(wèn)題
- js實(shí)現(xiàn)鍵盤(pán)控制DIV移動(dòng)的方法
- js實(shí)現(xiàn)鍵盤(pán)操作實(shí)現(xiàn)div的移動(dòng)或改變的原理及代碼
- 鍵盤(pán)上下鍵移動(dòng)選擇table表格行的js代碼
- javascript利用鍵盤(pán)控制小方塊的移動(dòng)
相關(guān)文章
這篇文章主要介紹了自己實(shí)現(xiàn)ajax封裝示例,需要的朋友可以參考下
2014-04-04 
JavaScript事件監(jiān)聽(tīng)器詳細(xì)介紹
這篇文章主要介紹了JavaScript事件監(jiān)聽(tīng)器詳細(xì)介紹,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下
2022-09-09 
這篇文章主要為大家詳細(xì)介紹了微信小程序繪制半圓（弧形）進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11 
JavaScript的DOM與BOM的區(qū)別與用法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript的DOM與BOM的區(qū)別與用法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03 
用javascript獲取任意顏色的更亮或更暗顏色值示例代碼
最近在工作中遇到的一個(gè)需求，發(fā)現(xiàn)網(wǎng)上沒(méi)有相對(duì)應(yīng)的解決方法，索性自己寫(xiě)一個(gè)，所以這篇文章主要給大家介紹了關(guān)于利用javascript獲取任意顏色更亮或更暗顏色值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-07-07 
數(shù)組去重，一般都是在面試的時(shí)候才會(huì)碰到，一般是要求手寫(xiě)數(shù)組去重方法的代碼。如果是被提問(wèn)到，數(shù)組去重的方法有哪些？你能答出其中的10種，面試官很有可能對(duì)你刮目相看
2019-12-12 
js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)
本文主要分享了js實(shí)現(xiàn)文字無(wú)縫向上滾動(dòng)的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02 
JavaScript數(shù)組類型Array相關(guān)的屬性與方法詳解
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組類型Array相關(guān)的屬性與方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09 
javascript實(shí)現(xiàn)的彈出層背景置灰-模擬(easyui dialog)
本文為大家介紹下使用javascript實(shí)現(xiàn)的彈出層背景置灰-模擬(easyui dialog) 具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-12-12