繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript下用键盘控制层的移动的代码
- Javascript
- 自己开发Dojo的建议框架
- js每次Title显示不同的名言
- 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
- 无限级别的菜单（侧拉菜单）
- 点选TOP后并不是直接跳到页顶的，而是滚动上去
- js下拉菜单中自动信息轮换播放
- 英文首字母全大写的js实现脚本
- 实例区别onClick和onDBClick两事件方法
- 改变文本框字体颜色的js脚本
- js星空效果代码
- 判断li是否有样式的js代码
- 文本框点击时文字消失，失去焦点时文字出现
- 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开
- 右下角弹出窗口效果代码
- JS控制对象移动效果
- 验证用户是否修改过页面的数据的实现方法
- Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
- 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
- EXT富客户端后台管理系统 初步代码
- 不同浏览器javascript变量作用域的处理方法
Javascript 中的 javascript下用键盘控制层的移动的代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 239 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
评论 (0) All
