js键盘控制DIV移动
<style type="text/css">
html,body{overflow:hidden;}
body{margin:0;padding:0;}
pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier New;margin:12px;}
span{color:#999;}
#box{position:absolute;top:50px;left:300px;width:100px;height:100px;background:red;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oBox = document.getElementById("box");
var bLeft = bTop = bRight = bBottom = bCtrlKey = false;
setInterval(function ()
{
if (bLeft)
{
oBox.style.left = oBox.offsetLeft - 10 + "px"
}
else if (bRight)
{
oBox.style.left = oBox.offsetLeft + 10 + "px"
}
if (bTop)
{
oBox.style.top = oBox.offsetTop - 10 + "px"
}
else if(bBottom)
{
oBox.style.top = oBox.offsetTop + 10 + "px"
}
//防止溢出
limit();
},30);
document.onkeydown = function (event)
{
var event = event || window.event;
bCtrlKey = event.ctrlKey;
switch (event.keyCode)
{
case 37:
bLeft = true;
break;
case 38:
if(bCtrlKey)
{
var oldWidth = oBox.offsetWidth;
var oldHeight = oBox.offsetHeight;
oBox.style.width = oBox.offsetWidth * 1.5 + "px";
oBox.style.height = oBox.offsetHeight * 1.5 + "px";
oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
break;
}
bTop = true;
break;
case 39:
bRight = true;
break;
case 40:
if(bCtrlKey)
{
var oldWidth = oBox.offsetWidth;
var oldHeight = oBox.offsetHeight;
oBox.style.width = oBox.offsetWidth * 0.75 + "px";
oBox.style.height = oBox.offsetHeight * 0.75 + "px";
oBox.style.left = oBox.offsetLeft - (oBox.offsetWidth - oldWidth) / 2 + "px";
oBox.style.top = oBox.offsetTop - (oBox.offsetHeight - oldHeight) / 2 + "px";
break;
}
bBottom = true;
break;
case 49:
bCtrlKey && (oBox.style.background = "green");
break;
case 50:
bCtrlKey && (oBox.style.background = "yellow");
break;
case 51:
bCtrlKey && (oBox.style.background = "blue");
break;
}
return false
};
document.onkeyup = function (event)
{
switch ((event || window.event).keyCode)
{
case 37:
bLeft = false;
break;
case 38:
bTop = false;
break;
case 39:
bRight = false;
break;
case 40:
bBottom = false;
break;
}
};
//防止溢出
function limit()
{
var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]
//防止左侧溢出
oBox.offsetLeft <=0 && (oBox.style.left = 0);
//防止顶部溢出
oBox.offsetTop <=0 && (oBox.style.top = 0);
//防止右侧溢出
doc[0] - oBox.offsetLeft - oBox.offsetWidth <= 0 && (oBox.style.left = doc[0] - oBox.offsetWidth + "px");
//防止底部溢出
doc[1] - oBox.offsetTop - oBox.offsetHeight <= 0 && (oBox.style.top = doc[1] - oBox.offsetHeight + "px")
}
};
</script>
上:↑ 下:↓ 左:← 右:→
Ctrl + 1 : 背景变为绿色
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小
//被移动的方块【DIV】
<div id="box"></div>
js键盘控制DIV移动的更多相关文章
- js键盘控制div移动,解决停顿问题
问题版本代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> &l ...
- JS实现用键盘控制DIV上下左右+放大缩小与变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 键盘控制div移动并且解决停顿问题(原生js)
<html> <head> <title>键盘控制div移动,解决停顿问题</title> <meta charset="utf-8&q ...
- 键盘控制div移动
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- js 键盘移动div、img对象
js 键盘移动div.img对象 <html> <script type="text/javascript"> var EXtype="" ...
- 用键盘控制DIV && Div闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js练习-控制div属性
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一 ...
- 键盘控制div上下左右移动 (转)
<html> <head> <title></title> <link rel="stylesheet" type=" ...
- 用JS来控制 div的高度随浏览器变化而变化
<div id="test" style=" border: solid 1px #f00; "></div> <script t ...
随机推荐
- SharePoint SiteCollection Administrator
到网上去找怎么取到一个站点的sitecollection Administrator, 如果设置了一个站点的 sitecollection Administrator, 那么通过: SPSite ...
- WEB 开发工具分享
有好用的工具 : 云盘链接地址:
- js--小结⑤
js中的for循环,while循环,do...while循环和C语言的一模一样 有几个问题要提醒一下的是 1. null是对象,即object undefined是undefined d ...
- struts 2读书笔记-----struts2的开发流程
一.将struts 2的lib文件夹下地commons-fileupload.jar.commons-io.jar.freemarker.jar.javassist.jar.ognl.jar.stru ...
- (转)Asp.Net 请求处理机制
原文:http://www.cnblogs.com/cilence/archive/2012/05/28/2520712.html Asp.Net 请求处理机制 前言 我们都知道Web请求响应是基 ...
- 源码心德`Context`类
Context,中文直译为“上下文”,SDK中对其说明如下: Interface to global information about an application environment. Thi ...
- xcode7启动页的尺寸设置
iPhone Portrait iOS 8,9-Retina HD 5.5 (1242×2208) @3x iPhone Portrait iOS 8,9-Retina HD 4.7 (750×133 ...
- POJ 1936 All in All(模拟)
All in All 题目链接:http://poj.org/problem?id=1936 题目大意:判断从字符串s2中能否找到子串s1.字符串长度为10W. Sample Input sequen ...
- [LeetCode OJ] Largest Rectangle in Histogram
Given n non-negative integers representing the histogram's bar height where the width of each bar is ...
- Binary Tree Inorder Traversal 解题思路 ×
问题: 非递归中序遍历二叉树 思路: 1.大循环,判断节点是否为空,栈是否为空 2.不为空:点进栈,向左走 3.为空:为空,出栈,读取值,向右走