`
IsItLikeThat
  • 浏览: 41217 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JS键盘方向控制

阅读更多
<script>
//document.onkeydown=keydown
//document.onkeyup=keyup

var $=function(objId) {
    return document.getElementById(objId);
}

Array.prototype.remove=function(keypos)
 {
    var j=0;
    for(var i=0;i<this.length;i++)
     {
        if(this[i]!=keypos)
         {
            this[j]=this[i];
            j=j+1;
        }
        
    }
    this.pop();
}

function KeyControl()
 {
    this.Active=true;
    this.speed=10;
    this.timecontrol=50;
    this.KeyCode=new Array();
    this.a="aaa";
    this.ControlObject=new Array();
    this.obj=null;
    //alert(this.a);
    this.direct=new Array(this.top,this.left,this.right,this.down,this.topleft,this.downleft,this.topright,this.downright);
    //alert(this.direct[0].arrKey);
}

KeyControl.prototype= {
    
    top: {name:"top",arrKey:new Array('38'),xpos:"",ypos:"-"},
    left: {name:"left",arrKey:new Array('37'),xpos:"-",ypos:""},
    right: {name:"right",arrKey:new Array('39'),xpos:"+",ypos:""},
    down: {name:"down",arrKey:new Array('40'),xpos:"",ypos:"+"},
    topleft: {name:"topleft",arrKey:new Array('38','37'),xpos:"-",ypos:"-"},
    downleft: {name:"downleft",arrKey:new Array('37','40'),xpos:"-",ypos:"+"},
    topright: {name:"topright",arrKey:new Array('38','39'),xpos:"+",ypos:"-"},
    downright: {name:"downright",arrKey:new Array('39','40'),xpos:"+",ypos:"+"},
    nocontrol:"nocontrol"
    
}

KeyControl.prototype.keyup=function()
 {
    var keypos=event.keyCode;
    this.KeyCode.remove(keypos);
    //alert(this.KeyCode.length);
}



KeyControl.prototype.Add=function(objId)
 {
    this.ControlObject[this.ControlObject.length]=objId;
}

KeyControl.prototype.Remove=function(objId)
 {
    this.ControlObject.remove(objId);
}

KeyControl.prototype.Direct=function()
 {
    var stack=null;
    //alert(this.KeyCode.length);
    for(var i=this.KeyCode.length-1;i>=0;i--)
     {
        //alert(this.KeyCode.length);
        if(stack==null)
         {
            for(var j=0;j<4;j++)
             {
                //alert(this.direct[j].arrKey[0]);
                //alert(this.KeyCode[i]);
                if(parseInt(this.KeyCode[i])==parseInt(this.direct[j].arrKey[0]))
                 {
                    stack=this.direct[j].arrKey[0];
                    break;
                }
            }
        }
        else
         {
            for(var j=4;j<this.direct.length;j++)
             {
                for(var k=0;k<this.direct[j].arrKey.length;k++)
                 {
                    if(parseInt(this.KeyCode[i])==parseInt(this.direct[j].arrKey[k]))
                     {
                        if(k==0&&parseInt(stack)==parseInt(this.direct[j].arrKey[1]))
                         {
                            return this.direct[j];
                            break;
                        }
                        else if(k==1&&parseInt(stack)==parseInt(this.direct[j].arrKey[0]))
                         {
                            return this.direct[j];
                            break;
                        }
                    }
                }
            }
        }
    }
    if(stack!=null)
     {
        for(var j=0;j<4;j++)
             {
                if(parseInt(stack)==parseInt(this.direct[j].arrKey[0]))
                 {
                    return this.direct[j];
                    break;
                }
            }
    }
    else
     {
        return null;
    }
}

KeyControl.prototype.Move=function()
 {
    var _direct=this.Direct();
    
    
    if(_direct==null)
     {
        
        return false;
    }
    
    if(_direct.xpos.length>0)
     {
        if(_direct.xpos=="+")
         {
            var objNodes=this.ControlObject;
            for(var i=0;i<objNodes.length;i++)
             {
                if($(objNodes[i]).style.left=="")
                 {
                    $(objNodes[i]).style.left=0;
                }
                $(objNodes[i]).style.left=parseInt($(objNodes[i]).style.left)+5;                
            }
        }
        else
         {
            var objNodes=this.ControlObject;
            for(var i=0;i<objNodes.length;i++)
             {
                if($(objNodes[i]).style.left=="")
                 {
                    $(objNodes[i]).style.left=0;
                }
                $(objNodes[i]).style.left=parseInt($(objNodes[i]).style.left)-5;                
            }
        }
    }
    if(_direct.ypos.length>0)
     {
        if(_direct.ypos=="+")
         {
            //objNodes[i].top=parseInt(objNodes[i].style.top)+5;
            var objNodes=this.ControlObject;
            for(var i=0;i<objNodes.length;i++)
             {
                if($(objNodes[i]).style.top=="")
                 {
                    $(objNodes[i]).style.top=0;
                }
                $(objNodes[i]).style.top=parseInt($(objNodes[i]).style.top)+5;                
            }
        }
        else
         {
            var objNodes=this.ControlObject;
            for(var i=0;i<objNodes.length;i++)
             {
                if($(objNodes[i]).style.top=="")
                 {
                    $(objNodes[i]).style.top=0;
                }
                $(objNodes[i]).style.top=parseInt($(objNodes[i]).style.top)-5;                
            }
        }
    }
}

KeyControl.prototype.keydown=function()
 {
    var keypos=event.keyCode;
    var flag=true;
    for(var i=0;i<this.KeyCode.length;i++)
     {
        if(keypos==this.KeyCode[i])
         {
            flag=false;
            break;
        }
    }
    if(flag)
     {
        this.KeyCode[this.KeyCode.length]=keypos;
    }
    //alert(this.KeyCode.length);
    //objTemp.keydown.call(objTemp);
}

Function.prototype.bind=function()
 {
    var   self   =   this;   
   var   arg   =   arguments;   
   return   function() {   
   self.apply(null,arg);   
   }   
}

var objTemp=new KeyControl();
objTemp.Add("div1");
var f=function()
 {
    objTemp.keydown();
}

var f1=function()
 {
    objTemp.keyup();
}

f2=function()
 {
    objTemp.Move();
    window.setTimeout("f2()",200);
}

document.onkeydown=f;
document.onkeyup=f1;

f2();


</script>

<div id="div1" style="position:absolute;">lxy</div>

 

分享到:
评论

相关推荐

    【JavaScript源代码】JS实现可以用键盘方向键控制的动画.docx

    【JavaScript源代码】JS实现可以用键盘方向键控制的动画 在网页开发中,有时我们需要创建交互式的用户体验,例如使用键盘操作元素的移动。这个例子展示了如何利用JavaScript来实现在浏览器中通过键盘方向键控制图像...

    js键盘事件实现人物的行走

    本文将详细介绍如何通过JavaScript的键盘事件来控制网页上人物的移动和跳跃,具体实现2D效果。为此,我们将通过示例代码来展示整个过程。首先,我们需要建立一个HTML文档,并通过CSS来设定基本的样式。然后,通过...

    js自动移动图片,键盘可控制方向

    js自动移动图片,键盘可控制方向

    js键盘箭头控制上下选中标签元素

    在JavaScript编程中,使用键盘箭头来控制选中标签元素是一项常见的交互设计,尤其是在网页应用中。这个小demo展示了如何通过监听键盘事件并处理箭头键的按下,以实现元素的选择切换。以下将详细讲解这一功能的实现...

    方向键盘控制table内的input标签焦点

    "方向键盘控制table内的input标签焦点"这一主题关注的是如何通过键盘导航提高用户在表格内输入数据的效率。在传统的网页交互中,用户通常通过鼠标点击来切换输入框的焦点,但通过键盘的上下左右箭头键进行导航能提供...

    jQuery键盘控制焦点图

    3. **切换逻辑**:当用户按下键盘上的方向键(例如左箭头和右箭头)时,焦点图应该按照相应方向进行切换。我们可以定义一个函数来处理这个逻辑,该函数会更新当前显示的图片索引,并据此更新显示的图片。 4. **动画...

    鼠标选中按键,方向键控制选中按键移动

    其次,利用方向键进行控制是基于键盘的导航方式,常见于游戏、文本编辑器以及某些特定的软件应用。在多空间页面中,如果用户需要精确地移动某个控件,使用方向键往往比鼠标更方便。这涉及到键盘事件的监听和处理,...

    js控制图片左右滚动,可控制方向

    6. **方向控制**:实现可控方向的关键在于正确处理滚动事件。当用户触发左键或右键事件时,需要相应地减小或增加图片的位置值。同时,需要检查图片是否已经滚动到边界,以防止过度滚动。 7. **响应式设计**:考虑到...

    JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例

    本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 &lt;!doctype html&gt; &lt;html lang=en&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &...

    浅谈js键盘事件全面控制

    今天,我们就来深入探讨JavaScript(js)中如何对键盘事件进行全面的控制,包括不同浏览器之间的兼容性处理以及代码实现和优化。 首先,我们需要明确浏览器中与键盘事件相关的主要类型,它们分别是keydown、...

    jQ键盘控制焦点图.zip

    在jQuery键盘控制焦点图这个例子中,图片相册功能与键盘控制相结合,用户可以通过按下键盘上的方向键或者数字键来浏览图片,使得图片浏览更加便捷且具有沉浸感。 在压缩包文件"jiaoben18124"中,可能包含了以下内容...

    原生js鼠标滚轮及左右键盘控制图片自适应切换效果代码

    在JavaScript编程中,实现“原生js鼠标滚轮及左右键盘控制图片自适应切换效果”是一种常见的用户交互设计。这个功能允许用户通过鼠标滚轮或键盘的左右箭头键来浏览一组图片,同时确保图片在不同设备和屏幕尺寸上能够...

    javascript网页键盘交互式代码

    例如,使用`keyup`事件来实现简单的方向控制: ```javascript let upKey = false; let downKey = false; let leftKey = false; let rightKey = false; document.addEventListener('keydown', function(event) { ...

    鼠标右键,键盘控制左右移动echarts标记线、标记点

    在本文中,我们将深入探讨如何使用ECharts,一个流行的JavaScript数据可视化库,来实现鼠标右键功能以及通过键盘控制ECharts中的标记线(markLine)和标记点(marker)。ECharts提供了一套丰富的API和交互功能,使得...

    键盘方向键移动表格中的光标(包含鼠标选择)

    标题“键盘方向键移动表格中的光标(包含鼠标选择)”揭示了一个重要的操作技巧,即如何利用键盘和鼠标来精准控制表格内的光标移动及选区选择。下面将详细阐述这些知识点。 首先,键盘方向键在表格操作中的作用不可...

    存js手写数字键盘带小数点

    1. **响应式设计**:确保键盘在不同屏幕尺寸和设备方向(横屏/竖屏)下都能正常工作。 2. **事件处理**:除了点击事件,可能还需要处理删除键、清除键以及确认输入的操作。 3. **输入验证**:对用户输入进行实时验证...

    js实现上下左右键盘控制div移动

    标签“js上下键盘控制div移动”、“js键盘控制div移动”、“js上下左右键盘控制”进一步强调了这个话题的核心,即利用JavaScript处理键盘事件,并据此改变div的CSS属性(如`top`和`left`)来实现移动效果。...

    键盘控制下拉键盘控制下拉键盘控制下拉

    3. **方向键控制**:通常,我们用上下箭头键来浏览下拉菜单的选项,左右箭头可能用于展开/折叠子菜单(如果存在)。 4. **空间键和回车键**:这两个键通常用于选择当前高亮的选项或执行与选中项关联的动作。 5. **...

    自适应炫酷仿真网页键盘js特效代码.zip

    总的来说,"自适应炫酷仿真网页键盘js特效代码"是一个很好的学习和实践项目,它涵盖了JavaScript事件处理、DOM操作、自适应设计以及CSS3动画等多个关键知识点。通过研究和理解这段代码,开发者不仅能提升自己的...

Global site tag (gtag.js) - Google Analytics