首页 > 代码库 > 纯js实现用键盘控制DIV上下左右+放大缩小与变色
纯js实现用键盘控制DIV上下左右+放大缩小与变色
//用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小
用键盘控制DIV，红色方块为键盘操作区域，您可以进行如下操作：
上：↑ 下：↓ 左：← 右：→
Ctrl + 1 : 背景变为绿色
Ctrl + 2 : 背景变为黄色
Ctrl + 3 : 背景变为蓝色
Ctrl + ↑ : 放大
Ctrl + ↓ : 缩小
<!--
Author: XiaoWen
Create a file: 2017-01-10 19:00:30
Last modified: 2017-01-12 13:19:28
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width:80px;
height:80px;
background:#f00;
position:absolute;
}
</style>
</head>
<body>
<pre>
移动：上↑ 下↓ 左← 右→
颜色：
ctrl + 1 绿色
ctrl + 2 黄色
ctrl + 3 蓝色
大小：
ctrl + ↑ 放大
ctrl + ↓ 缩小
<!-- 重置：Ctrl + Enter -->
</pre>
<div id="box"></div>
</body>
<script>
var box=document.getElementById(‘box‘);
onkeydown=function(){
if(ev(event).ctrlKey){
var code=ev(event).keyCode
code==49 ? box.style.background=‘#0f0‘ : ‘‘
code==50 ? box.style.background=‘#ff0‘ : ‘‘
code==51 ? box.style.background=‘#00f‘ : ‘‘
code==38 ? resize(‘big‘) : ‘‘
code==40 ? resize(‘small‘) : ‘‘
code==13 ? console.log(‘重置‘) : ‘‘
function resize(re){
switch(re){
case ‘big‘:
box.style.width=box.offsetWidth+10+‘px‘;
box.style.height=box.offsetHeight+10+‘px‘;
break
case ‘small‘:
box.style.width=box.offsetWidth-10+‘px‘;
box.style.height=box.offsetHeight-10+‘px‘;
break
}
}
}else{
var code=ev(event).keyCode
code==37 ? box.style.left=box.offsetLeft-10+‘px‘ : ‘‘
code==38 ? box.style.top=box.offsetTop-10+‘px‘ : ‘‘
code==39 ? box.style.left=box.offsetLeft+10+‘px‘ : ‘‘
code==40 ? box.style.top=box.offsetTop+10+‘px‘ : ‘‘
}
}
function ev(ev){
var e=ev||event;
return e
}
</script>
</html>纯js实现用键盘控制DIV上下左右+放大缩小与变色
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。