当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript下用键盘控制层的移动的代码

Javascript
页面中body onload 和 window.onload 冲突的问题的解决
OnFocus与OnBlur的例子区别
javascript cloneNode()方法的使用
Javascript 文件夹选择框的两种解决方案
JQuery 风格的HTML文本转义
javascript 验证码生成代码 推荐学习
javascript new 需不需要继续使用
javascript 操作文件 实现方法小结
JavaScript 注册表访问实现代码
javascript web页面刷新的方法收集
Javascript 遍历对象中的子对象
javascript 具名函数的四种调用方式 推荐
javascript 写类方式之一
javascript 写类方式之二
javascript 写类方式之三
javascript 写类方式之四
javascript 写类方式之五
javascript 写类方式之六
javascript 写类方式之七
javascript 写类方式之八

No. « 143 144 145 146 »

技术文章搜索

关键字

Javascript 中的 javascript下用键盘控制层的移动的代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 322 ::
收藏到网摘: n/a

<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"><p>请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>，</p><p>
试试看有什么效果？ </p></span></div>
<span id="Layer1">控制键设置:<br>
向上移动:
<input name="Up" type="text" value="↑" size="6"><br>
向下移动:
<input name="Down" type="text" value="↓" size="6"><br>
向左移动:
<input name="Left" type="text" value="←" size="6"><br>
向右移动:
<input name="Right" type="text" value="→" size="6"><br>
每次移动 <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 = "<p>您按下了" + press + "键，</p>";
str += "<p>该图层" + evet;
txt.innerHTML = str;
}
}
//-->
</script>
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]