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"><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>

键盘控制层的移动

请分别按下 ↑、↓、←、→，

试试看有什么效果？

控制键设置:

向上移动:

向下移动:

向左移动:

向右移动:

每次移动
px;

105) && event.keyCode != 8 && event.keyCode != 46 && !(event.keyCode >= 37 && event.keyCode ← ";
evet = "向 左 移动" + " " + int + " px 。";
div.style.left = (parseInt(div.currentStyle.left) - int) + "px";
if(parseInt(div.style.left) 最左边 ，无法再 向左 移动。";
div.style.left = "0px";
break ;
}
break;
}
case up:{
press = " ↑ ";
evet = "向 上 移动" + " " + int + " px 。";
div.style.top = (parseInt(div.currentStyle.top) - int) + "px";
if(parseInt(div.style.top) 最上边 ，无法再 向上 移动。";
div.style.top = "0px";
break ;
}
break;
}
case right:{
press = " → ";
evet = "向 右 移动" + " " + 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 = "已经到了 最右边 ，无法再 向右 移动。";
break ;
}
break;
}
case down:{
press = " ↓ ";
evet = "向 下 移动" + " " + 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 = "已经到了 最下边 ，无法再 向下 移动。";
break ;
}
break;
}
default:
{
return;
}
}
str = "

您按下了" + press + "键，

";
str += "

该图层" + evet;
txt.innerHTML = str;
}
}
//-->

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 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:13

  • javascript实现可键盘控制的抽奖系统

    javascript实现可键盘控制的抽奖系统

    制作一个简易的抽奖系统!欢迎大家学习! JS原理:建立一个数组用来存储抽奖内容,例如 iphone6 等,当点击开始的时候,开启定时器,产生一个随机数,把对应文本的innerHTML改成数组所对应的内容. 如果想让某个抽奖几率变高,可以让数组中某个值重复次数多点.接下来看代码.. JavaScript代码 window.onload = function(){ var data = [ "iphone 6s plus", "苹果Mac 笔记本", "美的洗

  • javascript新建标签,判断键盘输入,以及判断焦点(示例代码)

    如下所示: 复制代码 代码如下: function saomiao(event,n){     var code=0;     code=event.keyCode;//监听键盘输入事件     if(code=='13')//如果键盘输入回车键     {          if(n>0)//开始判断参数          {               if(document.getElementById('logisticsno').value=='')          {       

  • javascript下给元素添加事件的方法与代码

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • JavaScript下利用fso判断文件是否存在的代码

    复制代码 代码如下: function ReportFileStatus(filespec) { var fso, s = filespec; fso = new ActiveXObject("Scripting.FileSystemObject"); if (fso.FileExists(filespec)) s += " exists."; else s += " doesn't exist."; return(s); } 采用客户端的 Fi

  • js支持键盘控制的左右切换立体式图片轮播效果代码分享

    js支持键盘控制的左右切换立体式图片轮播效果代码分享

    本文实例讲述了js支持键盘控制的左右切换立体式图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现支持键盘控制的左右切换立体式图片轮播效果,特别有立体感,最重要的一点是可以利用键盘进行控制. 特性介绍:      1.轻松的改变幻灯变的宽度.      2.轻易改变下一张展示图片的数量.      3.最后一张图片会循环回到第一张图片里.      4.嵌入了Fancy查看插件,在每张图片上都能查看详细图片信息. 运行效果图:                   

  • js实现上下左右键盘控制div移动

    js实现上下左右键盘控制div移动

    本文实例为大家分享了js上下左右键盘控制div移动的具体代码,供大家参考,具体内容如下 描述: div通过键盘事件上下左右实现div块的移动 效果:  实现: js: var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); img.arr=arr; img.list=[]; img.num=0; // 如果DOM对象下的事件侦听没有被删

  • javascript的键盘控制事件说明

    控制回车焦点问题: 复制代码 代码如下: <script type="text/javascript"> function submitForm() { if(window.event.keyCode==13) { document.getElementById('btnSearch').focus(); } } document.onkeydown=submitForm; </script> 首先需要了解的是如何初始化该事件,基本语句如下: document.

  • javascript利用键盘控制小方块的移动

    本文实例为大家分享了利用键盘控制小方块的移动,供大家参考,具体内容如下 原理 1. 利用键盘控制移动,则需要了解onkeydown函数,表示某个按键被按下,可以以此绑定一个事件响应函数,当键盘被按下时候,触发此事件,进行移动 2. keyCode 对于keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码.对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码.虚拟键盘码可能和使用的键盘的布局相关. 因此我们可以根据keycode返回的字符码来判断用户所

  • javascript控制层显示或隐藏的方法

    本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

随机推荐