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

最新推荐文章于 2021-05-26 20:18:45 发布
原创最新推荐文章于 2021-05-26 20:18:45 发布 · 314 阅读
CC 4.0 BY-SA版权
本文介绍了一个使用键盘方向键控制HTML元素移动的示例。通过JavaScript监听键盘事件，实现层的上下左右移动，并限制了层在浏览器窗口内的移动范围。
<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>