<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>
分享到：
相关推荐
Jquery定时器及键盘控制网页对象移动代码
与计算机图形学实践教程第2版源程序，是一个...彩色小球的光源移动论文，有3个不同的光照射在白色小球上，展示不同的颜色，设计内包含真实代码，且备注较为清晰，c++一个页面即可运行，如果运行不了说不定是缺少插件。
jquery实现的支持键盘方向按键和鼠标拖动切换的全屏相册/文字广告特效源码，是一段实现了可以使用键盘上下左右方向按键控制切换的效果代码，同时此段代码也支持鼠标拖动切换画面，本段代码适用于所有网页使用，有...
可以使用 microsoft自然键盘或含有 windows徽标键的其他任何兼容键盘的以下快捷键。 目的快捷键 在任务栏上的按钮间循环 windows+ tab 显示“查找：所有文件” windows+ f 显示“查找：计算机” ctrl+ ...
原因是，在探索键盘驱动程序的鼠标移动功能时，我注意到它没有按像素单位移动光标，而是似乎通过加速移动光标。当我想将光标移动到某个位置时，这会不断产生不一致的值。因为Win32游标设置API通常不被游戏等阻止，...
可以自动新建工程和实现最简单的HelloWorld，模拟鼠标的移动点击，和键盘的敲击，可以利用这个原理编写好多有趣的东西。
使用鼠标选中多空间页面的某一个按键，使用方向键进行该控件的多方向的移动
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS2048小游戏代码，原生JS编写。玩法说明:键盘上下左右控制移动，相同格子会累积加起来重叠为新的格子，当所有格子均占有并不能移动游戏结束，回车键或点击重新开始游戏将会重置。
记得以前介绍过简单版的JS泡泡龙游戏，今天再发一版美化增加的JavaScript网页版泡泡龙游戏，单机版的泡泡龙...玩法操作：鼠标左右移动改变角度,单击左键发射泡泡，或者按键盘左右方向键改变角度，按空格键发射泡泡……
//这是要操作的表格： 这是第一行 这是第二行 这是第三行 这是第四行 //这是操作表格的代码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
获取页面源代码 加密解密 宽带连接 类型转换 屏幕截图 奇虎发布信息 声音识别 鼠标操作 数据库 随机100种声音 图片匹配坐标 图像二值化 网络 文件信息 硬件信息 正则分割字符串 支持文件拖拽 注册表操作 字符操作 ...
• sample04.htm 在同一个网页中使用不同脚本语言 • sample05.htm 判断浏览器对JavaScript版本的支持情况 • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档...
一款简单的jQuery网页2048数字游戏代码，玩法：通过键盘上下左右按钮控制数字移动方向。
实例052 使用键盘控制窗体或控件的移动 189 实例053 多功能键盘 190 第6章 操作系统相关技术 实例054 利用API设置桌面背景 196 实例055 音乐风景桌面 198 实例056 定时关闭计算机 201 实例057 ...
"一个都不能死"是一款基于HTML5的网页小游戏，它使用了HTML5的Canvas技术进行游戏画面的绘制，以及JavaScript进行游戏逻辑的编程。这款游戏的主要特点是简单易上手，但又具有一定的挑战性，能够吸引玩家持续游玩。 ...
6.可以支持键盘上下左右箭头移动 7.可以切换图片上传到服务器后截取图片并返回客户端 8.图片上传是无刷新上传的">1.请浏览CutImage_Advance.aspx 这个页面例子最完整 2.使用了JCrop插件 3.可以选择背景色 4.控制选择...
20.2.1 使用可视化层中的类 进行打印 584 20.2.2 自定义多页打印 587 20.3 打印设置和管理 592 20.3.1 保存打印设置 592 20.3.2 打印页面范围 593 20.3.3 管理打印队列 593 20.4 通过XPS进行打印 596 20.4.1...
飞机控制：玩家可以通过键盘上的方向键或者鼠标来控制飞机的移动和射击，增加了游戏的可操作性和互动性。 敌人和障碍物：游戏中会出现各种敌人和障碍物，玩家需要躲避或击败它们，增加了游戏的挑战性和刺激性。 分数...
jQuery移动端手机键盘输入车牌号代码基于jquery.1.7.1.min.js制作，模拟手机键盘输入各省市的车牌号，写的粗糙，更多地方可进一步优化精简。