键盘操作DIV

原作者网址:http://www.jianshu.com/p/c51ccf949734

解决方法

方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态

初始4个方向的值都是false,div就保持在原地不动。

按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动。

松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。

基本移动,但是有挺顿的代码

<html>
<head>
    <title>键盘控制div移动,会有停顿</title>
    <meta charset="utf-8" />
    <style type="text/css">
        #div1{
                width:100px;
                height:100px;
                background:greenyellow;
                position:absolute;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            document.onkeydown = function(ev){
                var ev = ev || event;
                var keyCode = ev.keyCode;
                switch(keyCode){
                    case 37: oDiv.style.left = oDiv.offsetLeft-10+"px";break;
                    case 38: oDiv.style.top = oDiv.offsetTop-10+"px";break;
                    case 39: oDiv.style.left = oDiv.offsetLeft+10+"px";break;
                    case 40: oDiv.style.top = oDiv.offsetTop+10+"px";break;
                }
            }

        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html

控制移动,解决停顿的问题

<html>
<head>
    <title>键盘控制div移动并且解决停顿问题</title>
    <meta charset="utf-8" />
    <style type="text/css">

        /*设置div样式*/
        div{
            width:100px;
            height:100px;
            background: #68affc;
            position:absolute;
            left:100px;
            top:100px;
        }
    </style>
    <script>

        //当页面加载完后
        window.onload = function(){

            //获取Div元素
            var oDiv = document.getElementById("div1");

            //创建各个方向条件判断初始变量
            var left = false;
            var right = false;
            var top = false;
            var bottom = false;

            //当按下对应方向键时,对应变量为true
            document.onkeydown = function(ev){
                var oEvent = ev || event;
                var keyCode = oEvent.keyCode;
                switch(keyCode){
                    case 37:
                        left=true;
                        break;
                    case 38:
                        top=true;
                        break;
                    case 39:
                        right=true;
                        break;
                    case 40:
                        bottom=true;
                        break;
                }
            };

            //设置一个定时,时间为50左右,不要太高也不要太低
            setInterval(function(){

                //当其中一个条件为true时,则执行当前函数(移动对应方向)
                if(left){
                    oDiv.style.left = oDiv.offsetLeft-10+"px";
                }else if(top){
                    oDiv.style.top = oDiv.offsetTop-10+"px";
                }else if(right){
                    oDiv.style.left = oDiv.offsetLeft+10+"px";
                }else if(bottom){
                    oDiv.style.top = oDiv.offsetTop+10+"px";
                }
            },50);

            //执行完后,所有对应变量恢复为false,保持静止不动
            document.onkeyup = function(ev){
                var oEvent = ev || event;
                var keyCode = oEvent.keyCode;

                switch(keyCode){
                    case 37:
                        left=false;
                        break;
                    case 38:
                        top=false;
                        break;
                    case 39:
                        right=false;
                        break;
                    case 40:
                        bottom=false;
                        break;
                }
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

作者:浅吟轻唱链接:http://www.jianshu.com/p/c51ccf949734來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
时间: 2024-11-05 18:37:28

键盘操作DIV的相关文章

用键盘控制DIV &amp;&amp; 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-

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

//用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作:  上:↑ 下:↓ 左:← 右:→  Ctrl + 1 : 背景变为绿色  Ctrl + 2 : 背景变为黄色  Ctrl + 3 : 背景变为蓝色  Ctrl + ↑ : 放大  Ctrl + ↓ : 缩小 <!-- Author: XiaoWen Create a file: 2017-01-10 19:0

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-

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-

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-

Linux 用键盘操作窗口

以下是我从各处搜集来的关于用键盘操作窗口信息,操作可能不是最简或者最好的,当然也可能不是最全的,以后遇到新的操作,我会即使添加,如果你有我没有列出的操作,希望你能提出,我可以加上! 我实验的操作系统是ubuntu14.04,其他不清楚 1. 用键盘移动窗口 1)ALT+F7 快捷键, 然后用上.下.左.右键移动窗口 2)ALT+space(空格键),然后按m键,进入移动模式,然后用上.下.左.右键移动窗口 2.改变窗口大小 1)ALT+F8 快捷键, 然后用上.下.左.右键改变窗口大小 2)AL

WebDriver API——鼠标及键盘操作Actions

在自动化中我们可能需要用到鼠标或者是键盘操作,在webdriver中是Actions类进行这些操作的. 代码如下: Actions action = new Actions(driver); //-------定义一个action对象 action.click(); action.click(searchBt); //-------单击操作 action.doubleClick().perform(); action.doubleClick(searchBt).perform(); //----

IntelliJ IDEA全键盘操作

IntelliJ IDEA 如何做到全键盘操作呢? 1.自定义快捷键实现全屏操作 你可以设置自定义快捷键进入全屏操作,并实现各个窗口之间的切换.这样,你就可以告别小窗口的时代,体验全屏显示的效果了!(相信有过多年开发经验的你一定会觉得小窗口非常不便于阅读代码,特别是对于小屏幕的笔记本来说) 操作:在File/Settings(或Ctrl+Alt+S)打开设置界面,在搜索框中搜Keymap.然后将之前的keymap文件复制一份.因为原文件是不可以改动的,只有复制一份再对它进行设置自定义快捷键. 设

[转载]从MyEclipse到IntelliJ IDEA-让你摆脱鼠标,全键盘操作

从MyEclipse转战到IntelliJ IDEA的经历 注转载址:http://blog.csdn.net/luoweifu/article/details/13985835 我一个朋友写了一篇“从Eclipse到Android Studio”博文,于是心潮澎湃我也想一篇,分享自己用这个IDEA的一些技巧和感受. 来到公司的第一天,我的同事(也是我的师傅)就让我装IntelliJ IDEA.一开始我还不知道IntelliJ IDEA是什么,后来才知道它是一个Java的集成开发环境(IDE),