JS实现用键盘控制DIV上下左右+放大缩小与变色

　　用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作：

　　上：↑ 下：↓ 左：← 右：→

　　Ctrl + 1 : 背景变为绿色

　　Ctrl + 2 : 背景变为黄色

　　Ctrl + 3 : 背景变为蓝色

　　Ctrl + ↑ : 放大

　　Ctrl + ↓ : 缩小

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Awindow.onload%20%3D%20function%20()%20%0D%0A%7B%20%0D%0Avar%20oBox%20%3D%20document.getElementById(%22box%22)%3B%20%0D%0Avar%20bLeft%20%3D%20bTop%20%3D%20bRight%20%3D%20bBottom%20%3D%20bCtrlKey%20%3D%20false%3B%20%0D%0A%0D%0AsetInterval(function%20()%20%0D%0A%7B%20%0D%0Aif%20(bLeft)%20%0D%0A%7B%20%0D%0AoBox.style.left%20%3D%20oBox.offsetLeft%20-%2010%20%2B%20%22px%22%20%0D%0A%7D%20%0D%0Aelse%20if%20(bRight)%20%0D%0A%7B%20%0D%0AoBox.style.left%20%3D%20oBox.offsetLeft%20%2B%2010%20%2B%20%22px%22%20%0D%0A%7D%20%0D%0A%0D%0Aif%20(bTop)%20%0D%0A%7B%20%0D%0AoBox.style.top%20%3D%20oBox.offsetTop%20-%2010%20%2B%20%22px%22%20%0D%0A%7D%20%0D%0Aelse%20if(bBottom)%20%0D%0A%7B%20%0D%0AoBox.style.top%20%3D%20oBox.offsetTop%20%2B%2010%20%2B%20%22px%22%20%0D%0A%7D%20%0D%0A%2F%2F%E9%98%B2%E6%AD%A2%E6%BA%A2%E5%87%BA%20%0D%0Alimit()%3B%20%0D%0A%7D%2C30)%3B%20%0D%0A%0D%0Adocument.onkeydown%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0Avar%20event%20%3D%20event%20%7C%7C%20window.event%3B%20%0D%0AbCtrlKey%20%3D%20event.ctrlKey%3B%20%0D%0A%0D%0Aswitch%20(event.keyCode)%20%0D%0A%7B%20%0D%0Acase%2037%3A%20%0D%0AbLeft%20%3D%20true%3B%20%0D%0Abreak%3B%20%0D%0Acase%2038%3A%20%0D%0Aif(bCtrlKey)%20%0D%0A%7B%20%0D%0Avar%20oldWidth%20%3D%20oBox.offsetWidth%3B%20%0D%0Avar%20oldHeight%20%3D%20oBox.offsetHeight%3B%20%0D%0A%0D%0AoBox.style.width%20%3D%20oBox.offsetWidth%20*%201.5%20%2B%20%22px%22%3B%20%0D%0AoBox.style.height%20%3D%20oBox.offsetHeight%20*%201.5%20%2B%20%22px%22%3B%20%0D%0A%0D%0AoBox.style.left%20%3D%20oBox.offsetLeft%20-%20(oBox.offsetWidth%20-%20oldWidth)%20%2F%202%20%2B%20%22px%22%3B%20%0D%0AoBox.style.top%20%3D%20oBox.offsetTop%20-%20(oBox.offsetHeight%20-%20oldHeight)%20%2F%202%20%2B%20%22px%22%3B%20%0D%0A%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0AbTop%20%3D%20true%3B%20%0D%0Abreak%3B%20%0D%0Acase%2039%3A%20%0D%0AbRight%20%3D%20true%3B%20%0D%0Abreak%3B%20%0D%0Acase%2040%3A%20%0D%0Aif(bCtrlKey)%20%0D%0A%7B%20%0D%0Avar%20oldWidth%20%3D%20oBox.offsetWidth%3B%20%0D%0Avar%20oldHeight%20%3D%20oBox.offsetHeight%3B%20%0D%0A%0D%0AoBox.style.width%20%3D%20oBox.offsetWidth%20*%200.75%20%2B%20%22px%22%3B%20%0D%0AoBox.style.height%20%3D%20oBox.offsetHeight%20*%200.75%20%2B%20%22px%22%3B%20%0D%0A%0D%0AoBox.style.left%20%3D%20oBox.offsetLeft%20-%20(oBox.offsetWidth%20-%20oldWidth)%20%2F%202%20%2B%20%22px%22%3B%20%0D%0AoBox.style.top%20%3D%20oBox.offsetTop%20-%20(oBox.offsetHeight%20-%20oldHeight)%20%2F%202%20%2B%20%22px%22%3B%20%0D%0A%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0AbBottom%20%3D%20true%3B%20%0D%0Abreak%3B%20%0D%0Acase%2049%3A%20%0D%0AbCtrlKey%20%26%26%20(oBox.style.background%20%3D%20%22green%22)%3B%20%0D%0Abreak%3B%20%0D%0Acase%2050%3A%20%0D%0AbCtrlKey%20%26%26%20(oBox.style.background%20%3D%20%22yellow%22)%3B%20%0D%0Abreak%3B%20%0D%0Acase%2051%3A%20%0D%0AbCtrlKey%20%26%26%20(oBox.style.background%20%3D%20%22blue%22)%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%0D%0Areturn%20false%20%0D%0A%7D%3B%20%0D%0Adocument.onkeyup%20%3D%20function%20(event)%20%0D%0A%7B%20%0D%0Aswitch%20((event%20%7C%7C%20window.event).keyCode)%20%0D%0A%7B%20%0D%0Acase%2037%3A%20%0D%0AbLeft%20%3D%20false%3B%20%0D%0Abreak%3B%20%0D%0Acase%2038%3A%20%0D%0AbTop%20%3D%20false%3B%20%0D%0Abreak%3B%20%0D%0Acase%2039%3A%20%0D%0AbRight%20%3D%20false%3B%20%0D%0Abreak%3B%20%0D%0Acase%2040%3A%20%0D%0AbBottom%20%3D%20false%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%2F%2F%E9%98%B2%E6%AD%A2%E6%BA%A2%E5%87%BA%20%0D%0Afunction%20limit()%20%0D%0A%7B%20%0D%0Avar%20doc%20%3D%20%5Bdocument.documentElement.clientWidth%2C%20document.documentElement.clientHeight%5D%20%0D%0A%2F%2F%E9%98%B2%E6%AD%A2%E5%B7%A6%E4%BE%A7%E6%BA%A2%E5%87%BA%20%0D%0AoBox.offsetLeft%20%3C%3D0%20%26%26%20(oBox.style.left%20%3D%200)%3B%20%0D%0A%2F%2F%E9%98%B2%E6%AD%A2%E9%A1%B6%E9%83%A8%E6%BA%A2%E5%87%BA%20%0D%0AoBox.offsetTop%20%3C%3D0%20%26%26%20(oBox.style.top%20%3D%200)%3B%20%0D%0A%2F%2F%E9%98%B2%E6%AD%A2%E5%8F%B3%E4%BE%A7%E6%BA%A2%E5%87%BA%20%0D%0Adoc%5B0%5D%20-%20oBox.offsetLeft%20-%20oBox.offsetWidth%20%3C%3D%200%20%26%26%20(oBox.style.left%20%3D%20doc%5B0%5D%20-%20oBox.offsetWidth%20%2B%20%22px%22)%3B%20%0D%0A%2F%2F%E9%98%B2%E6%AD%A2%E5%BA%95%E9%83%A8%E6%BA%A2%E5%87%BA%20%0D%0Adoc%5B1%5D%20-%20oBox.offsetTop%20-%20oBox.offsetHeight%20%3C%3D%200%20%26%26%20(oBox.style.top%20%3D%20doc%5B1%5D%20-%20oBox.offsetHeight%20%2B%20%22px%22)%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<pre> 
红色方块为键盘操作区域，您可以进行如下操作： 
上：↑ 下：↓ 左：← 右：→ 
Ctrl + 1 : 背景变为绿色 
Ctrl + 2 : 背景变为黄色 
Ctrl + 3 : 背景变为蓝色 
Ctrl + ↑ : 放大 
Ctrl + ↓ : 缩小 
</pre> 
<div id="box"></div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程