<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结合定时器和键盘事件来创建一个交互式网页，允许用户通过键盘控制页面上的对象移动。通过深入理解并实践这些技术，开发者可以增强网站的用户体验，创建更动态、更富于互动性...
### JavaScript 下用键盘控制层的移动的代码解析 在网页开发过程中，利用JavaScript实现键盘控制元素（层）的移动是一项非常实用的技术。本篇将基于提供的HTML与JavaScript代码，深入探讨其实现原理及相关知识点。 ...
5. 兼容性考虑：确保代码在主流移动浏览器上都能正常运行。 通过这个压缩包，开发者可以学习到如何利用jQuery和JavaScript创建自定义的输入键盘，以及如何处理移动端的输入事件。这不仅对创建车牌号输入功能有帮助...
软键盘JS源代码是用于网页交互中的一种技术，它允许用户在网页上输入文本，而无需依赖操作系统自带的物理键盘。这种技术对于移动设备或触摸屏设备尤其有用，因为它们可能没有实体键盘或者键盘操作不便。以下是关于软...
在网页开发中，为了提高用户体验，有时我们需要在输入框中集成虚拟键盘，以确保用户在无物理键盘的设备上也能方便地输入数据。本文将深入探讨一个基于jQuery实现的虚拟键盘代码，包括其功能特性、工作原理以及如何在...
在JavaScript的世界里，网页键盘交互式代码是一种常见的技术，它使得用户可以通过键盘操作来与网页进行互动，提高用户体验。这个"JS网页键盘交互式代码.zip"压缩包很可能包含了一组实现这种交互功能的示例代码。现在...
JavaScript软键盘代码是一种在网页上实现输入控制的解决方案，尤其适用于移动设备，因为这些设备可能没有物理键盘。这种软键盘通常是由JavaScript动态生成并显示在屏幕上的，为用户提供输入文字的功能，常见于登录、...
在网页开发中，有时出于安全或特殊需求，例如在移动设备上输入密码或者在触摸屏设备上操作，开发者会引入虚拟键盘来替代系统的物理键盘。jQuery键盘插件就是为了解决这一问题而设计的，它提供了丰富的功能和自定义...
在移动设备上，为了优化用户体验，开发者经常需要自定义数字输入键盘，以便用户在输入数字时更加方便。这个"jQuery手机端数字键盘底部弹...开发者可以通过学习和使用这个代码，进一步优化其移动应用或网页的交互设计。
首先，我们来看项目的标题——"jQuery彩色酷炫虚拟键盘代码.zip"，这表明我们将使用jQuery这个强大的JavaScript库来实现一个具有色彩效果的虚拟键盘。jQuery简化了DOM操作，事件处理以及动画效果，使得创建交互式的...
### 在网页中使用软键盘的方法 #### 背景与应用场景 随着移动互联网的发展，越来越多的应用场景需要在触摸屏设备上进行文字输入。对于那些不支持物理键盘或使用虚拟键盘更为方便的情况，网页中的软键盘成为了重要的...
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...
在探讨“FLASH人物移动代码”这一主题时，我们首先需要理解Flash作为一种广泛应用于网页动画、游戏和多媒体内容创作的平台，其重要性不言而喻。尤其在20世纪90年代末至21世纪初，Flash几乎是互联网上多媒体内容的代...
在没有Java Applet或Flash等插件支持的情况下，JavaScript软键盘代码是一种实用的解决方案，用于提供安全的输入环境，尤其在移动设备上，比如在线支付或敏感信息输入时。 软键盘通常由一系列按钮组成，模拟物理键盘...
使用jQuery创建网页小键盘，可以极大地提高开发效率，同时确保在各种浏览器上的一致性。 **jQuery小键盘的实现原理** 1. **HTML结构**：首先，需要在网页中创建一个容器元素，用于显示小键盘。这个容器可以是div...
2. **模拟鼠标操作**：它可以模拟鼠标的点击、移动、拖拽等动作，适用于网页浏览、游戏挂机、软件操作等场景。 3. **检测键盘状态**：描述中的“按键发声”功能，指的是按键精灵可以检测键盘是否正常工作，通过发出...
这个压缩包中的代码示例可以帮助开发者理解如何利用jQuery创建自定义的软键盘，特别是在移动设备上的登录页面。这对于那些希望优化移动用户体验并避免系统键盘遮挡内容的开发者来说非常有用。 总之，`jQuery点击弹...
在本文中，我们将深入探讨如何使用Qt框架来实现一个软键盘源代码，以此来创建一个类似于安卓或iOS手机键盘的应用。Qt是一个跨平台的应用程序开发框架，广泛应用于C++编程，它提供了丰富的图形用户界面（GUI）工具和...
6. **响应式设计**：考虑到不同设备的屏幕尺寸和用户习惯，自定义键盘应该具有良好的响应式设计，确保在手机和平板等移动设备上也能正常使用。 7. **用户体验**：尽管安全性至关重要，但用户体验同样重要。自定义...
这个文档主要讲解了如何使用 JavaScript 实现移动盒子效果的代码，并且讲解了多个知识点，包括使用 JavaScript 实现移动盒子效果、使用方向键掌握小方块的移动、使用 CSS 设置盒子的样式、使用外部 JavaScript 文件...