纯js实现用键盘控制DIV上下左右+放大缩小与变色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯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上下左右+放大缩小与变色的主要内容，如果未能解决你的问题，请参考以下文章
页面上有一个div 100*100 颜色为黄色 按键盘上下左右键可以操作div移动 ctrl+键盘上下键可以放大缩小 ctrl+键盘左右键可以随机变颜色
怎么用js实现点击页面上的div慢慢放大，再次点击慢慢缩小。在同一个div