当前位置:首页 > 开发 > Web前端 > 前端 > 正文

能使用键盘移动的层页面代码

发表于: 2010-08-12   作者:cuisuqiang   来源:转载   浏览次数:
摘要: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>键盘控制层的移动</title> <script language="java
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>键盘控制层的移动</title>
		<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 = "您按下了" + press + "键,";
  str += "该图层" + evet
  txt.innerHTML = str;
  }
  }
  //-->
  </script>
		<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">请分别按下 <font>↑</font>、<font>↓</font>、<font>←</font>、<font>→</font>,
				试试看有什么效果? </span>
		</div>
		<span id="Layer1">控制键设置: 向上移动: <input name="Up" type="text"
				value="↑" size="6"> 向下移动: <input name="Down" type="text"
				value="↓" size="6"> 向左移动: <input name="Left" type="text"
				value="←" size="6"> 向右移动: <input name="Right" type="text"
				value="→" size="6"> 每次移动 <input name="Int" type="text"
				id="Int" value="5" size="4" maxlength="3"> px;</span>
	</body>
</html>

 

能使用键盘移动的层页面代码

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
一、安装 npm -g install weinre 二、启动服务器 weinre [options] //The server will run until yo
如果使用如下输入框时,分别在IOS和ANDROID上的效果: 1. <input type="text" pattern="[0-9]*"&
转自csdn中一个朋友的回答答案 http://bbs.csdn.net/topics/310199485 当鼠标移动,显示出层,离开,
回想2年前刚开始接触手机项目,接到PSD稿后,发现视觉设计师们喜欢用微软雅黑作为中文字体进行设计
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字
一直不知道手机端用的什么字体,只是觉得类似雅黑,直到有一次设计师问到设计移动web页面该用什么字
Source:// http://www.cnblogs.com/jianyus/p/3616056.html 传统的SharePoint实施中,我们通常会创
  传统的SharePoint实施中,我们通常会创建SharePoint页面,然后添加webpartzone,而后在上面添加
原文:How to Use CslaGen to Generate CSLA Data Access Layer Code 最近用起了csla,这东东没个代
层(div)的定位在Web开发中,有着很重要的位置。主要用到的Css属性有:      position:absolut
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号