基于Jquery实现键盘按键监听


Posted in Javascript onMay 11, 2014

从NETTUTS看到的文章,效果很不错,有点类似于Flash做出来的效果,demo在这里 ,原文 对实现步骤讲得很清楚,我就不多提了,实现效果的逻辑比较简单,也就是slideDown()方法,

jquery slideDown()方法,实现滑动效果。

// shows a given element and hides all others  
function showViaKeypress(element_id)  
{  
    $(".container").css("display","none");  
    $(element_id).slideDown("slow");  
}  // shows proper DIV depending on link 'href'  
function showViaLink(array)  
{  
    array.each(function(i)  
    {     
        $(this).click(function()  
        {  
            var target = $(this).attr("href");  
            $(".container").css("display","none");  
            $(target).slideDown("slow");  
        });  
    });  
} 

而对键盘按键的监听是用的keypress()方法,其实也没什么难度,不过我们很少在页面上使用按键监听,这个例子比较新奇,值得我们参考,如有必要时,可以在项目里用用。

$(document).keypress(function(e)  
    {  
        switch(e.which)  
        {  
            // user presses the "a"  
            case 97:    showViaKeypress("#home");  
                        break;                // user presses the "s" key  
            case 115:   showViaKeypress("#about");  
                        break;  
            // user presses the "d" key  
            case 100:   showViaKeypress("#contact");  
                        break;  
            // user presses the "f" key  
            case 102:   showViaKeypress("#awards");  
                        break;  
            // user presses the "g" key   
            case 103:   showViaKeypress("#links");  
        }  
    });
Javascript 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
javascript 动态创建表格
Jan 08 Javascript
js格式化时间的简单实例
Nov 27 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
JavaScript如何利用Promise控制并发请求个数
May 14 Javascript
js判断游览器类型及版本号的代码
May 11 #Javascript
jquery实现文本框数量加减功能的例子分享
May 10 #Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 #Javascript
多引号嵌套的变量命名的问题
May 09 #Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 #Javascript
javascript的数组和常用函数详解
May 09 #Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 #Javascript
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
2020/09/12 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python实现图像全景拼接
2020/03/27 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
纠风工作实施方案
2014/03/15 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
乱世佳人观后感
2015/06/08 职场文书
开工典礼致辞
2015/07/29 职场文书
大学生十八大感想
2015/08/11 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS