JS实现用键盘控制DIV上下左右+放大缩小与变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用键盘控制DIV</title>
<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>
</head>
<body>
<pre>
红色方块为键盘操作区域，您可以进行如下操作：
上：↑ 下：↓ 左：← 右：→
Ctrl + 1 : 背景变为绿色
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小
</pre>
<div id="box"></div>
</body>
</html>
摘自：http://www.jb51.net/article/32823.htm
JS实现用键盘控制DIV上下左右+放大缩小与变色的更多相关文章
- 键盘控制div上下左右移动 (转)
<html> <head> <title></title> <link rel="stylesheet" type=" ...
- 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 ...
- 键盘控制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 ...
- 用键盘控制DIV && Div闪烁
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS的移入溢出控制div的显示与隐藏
原生JS的移入溢出控制div的显示与隐藏的写法 上面的写法火狐存在兼容性
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- js键盘控制DIV移动
<style type="text/css"> html,body{overflow:hidden;}body{margin:0;padding:0;}pre{colo ...
随机推荐
- Base64编码和解码算法
Base64么新鲜的算法了.只是假设你没从事过页面开发(或者说动态页面开发.尤其是邮箱服务),你都不怎么了解过,仅仅是听起来非常熟悉. 对于黑客来说,Base64与MD5算法有着相同的位置.由于电子邮 ...
- ubuntu 下安装伪分布式 hadoop
安装准备: (1)hadoop安装包:hadoop-1.2.1.tar.gz (2)jdk安装包:jdk-7u60-linux-i586.gz (3)要是须要eclipse开发的话 还须要eclips ...
- 查看linux系统的开机时间/重启历史记录
查看linux系统的开机时间/重启历史记录1.who -b命令[root@rusky opt]# who -b ---查看最后一次(上次)系统启动的时间 system boot Dec 27 05:0 ...
- easyui placeholder 解决方案
最近,再用easyui的时候,发现easyui的input标签不支持h5的placeholder,为了实现这个效果,提供以下解决方案: 1.给input标签设置placeholder. <td& ...
- 反射操作辅助类ReflectionUtil
这篇文章的目的是介绍这样一种方式,就是在写一个函数的时候,传递的参数是object类型的,在这个函数里面想访问这个参数对象的某一属性值,我们知道这个属性值的name,但是一般情况下,object对象是 ...
- javascript动态创建对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Single Number(JAVA)
Given an array of integers, every element appears twice except for one. Find that single one. Note: ...
- Mac下Apache服务器配置
一.Apache服务器 1. 使用最广的 Web 服务器 2. Mac自带,只需要修改几个配置就可以,简单,快捷 3. 有些特殊的服务器功能,Apache都能很好的支持 目的:让有一个自己专属的测试环 ...
- servlet 之 返回json数据并显示
//实体类import java.util.ArrayList; public class ObjectType { private String type; private ArrayList< ...
- VB.NET生成Excel，已存在提示框点否时报错
如题 Exception from HRESULT: 0x800A03EC 最终没有好的解决方案,只好屏蔽掉 Try obook.SaveAs(excelSaveName) Catch ex As S ...