<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>file</title>
<script src="../js/jQuery1.10.2.js"></script>
<script src="../js/file.js"></script>
<link rel="stylesheet" href="../css/file.css" />
<script>
</script>
</head>
<body>
<div id=a></div>
<div id=b></div>
</body>
</html>
var KEY = {
UP : 38,
DOWN : 40,
LEFT : 37,
RIGHT : 39,
W : 87,
S : 83,
A : 65,
D : 68
};
var plane = {};
plane.pressedKeys = [];
plane.deg = 0;
$(function() {
// 设置interval用于每30毫秒调用一次gameloop
plane.timer = setInterval(gameloop, 20);
// 标记下pressedKeys数组里某键的状态是按下还是放开
$(document).keydown(function(e) {
plane.pressedKeys[e.which] = true;
});
$(document).keyup(function(e) {
plane.pressedKeys[e.which] = false;
});
});
function gameloop() {
move();
}
function move() {
// 方向
if (plane.pressedKeys[KEY.LEFT]) {
plane.deg-=2;
document.getElementById("a").style.transform = "rotate(" + plane.deg
+ "deg)";
}
if (plane.pressedKeys[KEY.RIGHT]) {
plane.deg+=2;
document.getElementById("a").style.transform = "rotate(" + plane.deg
+ "deg)";
}
// movement
if (plane.pressedKeys[KEY.W]) {
var top = parseInt($("#a").css("top"));
$("#a").css("top", top - 3);
}
if (plane.pressedKeys[KEY.S]) {
var top = parseInt($("#a").css("top"));
$("#a").css("top", top + 3);
}
if (plane.pressedKeys[KEY.A]) {
var left = parseInt($("#a").css("left"));
$("#a").css("left", left - 3);
}
if (plane.pressedKeys[KEY.D]) {
var left = parseInt($("#a").css("left"));
$("#a").css("left", left + 3);
}
}
div#a {
position: absolute;
left: 100px;
top: 400px;
width: 30px;
height: 100px;
background-color: #115599;
/*transform: rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
z-index: 100;
}
div#b {
position: absolute;
left: 100px;
top: 300px;
width: 50px;
height: 50px;
background-color: #669911;
}
分享到：
相关推荐
以上就是用JavaScript实现键盘控制DIV上下左右移动、背景颜色变换以及放大缩小的完整过程。这个示例展示了JavaScript如何与DOM元素交互，以及如何利用键盘事件来增强用户体验。这种技术可以被应用于各种网页应用程序...
本文实例讲述了js实现键盘控制DIV移动的方法。分享给大家供大家参考。具体分析如下： css样式部分： 代码如下:<style type=”text/css”> html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color...
3. 键盘事件监听（`keyup`）以响应键盘输入，控制Div的滚动。 4. 可能存在的额外逻辑处理函数（如`change`），用于处理与用户交互相关的其他任务。 这个实现可以作为一个基础框架，根据实际需求进行扩展和优化，...
这个简单的示例展示了如何用JavaScript实现基本的键盘控制div移动。实际应用中，可能需要考虑更多的细节，如边界检测（防止div移出可视区域）、更平滑的动画效果（通过requestAnimationFrame实现）以及可能存在的...
键盘控制div移动并且解决停顿问题 /*设置div样式*/ div{ width:100px; height:100px; background:#68affc; position:absolute; left:100px; top:100px; } //当页面加载完后 window.onload=function(){ //...
下面是一个利用键盘码控制div移动的简单示例： ```html <!DOCTYPE html> <title></title> #box { height: 100px; width: 100px; background-color: red; position: absolute; } <!-- 记录键盘码 ...
在JavaScript（JS）中，创建一个可拖动和键盘控制的地图功能是一项常见的需求，尤其在Web开发中，例如在线地图应用、游戏或者交互式数据可视化项目。本篇将详细讲解如何实现这一功能。 首先，我们需要理解地图的...
1. accessKey：设置或获取对象的快捷键，使得用户可以通过键盘快速激活Div元素。 2. align：设置或获取Div元素的对齐方式，可以是"left", "right", "center", "justify"等，用于调整元素在页面上的位置。 3. ...
在这个场景下，开发者可能使用div来创建一个模拟的键盘布局，每个按键都是一个div元素，通过CSS来控制其大小、颜色、边框等视觉效果，以适应触摸屏的交互需求。 接下来，JavaScript的引入是为了实现键盘的动态行为...
在构建模态对话框时，我们通常会创建一个隐藏的 `div` 元素，然后通过 JavaScript 来控制它的显示和隐藏，以实现对话框的效果。 `dd.html` 文件可能是包含对话框HTML结构的示例文件。在 HTML 结构中，模态对话框...
`div` 是一个HTML（超文本标记语言）的块级元素，常用于组织页面布局，而`css`（层叠样式表）则用于控制网页的样式和布局。本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，...
在网页开发中，有时我们需要对用户的输入进行特定的控制，比如限制用户在某个特定的`div`元素中按下回车键时的行为。标题"js限制DIV输入回车"所涉及的知识点，就是如何使用JavaScript来阻止或改变`div`内的回车事件...
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
例如，使用`document.getElementById().style.display`可以控制div的可见性。 7. **Z-index**：在多个层叠元素中，`z-index`属性用于设置元素的堆叠顺序，确保弹出窗口始终在其他元素之上，确保用户能清晰看到弹出...
本文将详细介绍如何通过JavaScript的键盘事件来控制网页上人物的移动和跳跃，具体实现2D效果。为此，我们将通过示例代码来展示整个过程。首先，我们需要建立一个HTML文档，并通过CSS来设定基本的样式。然后，通过...