基于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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
理解javascript中DOM事件
Dec 25 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python requests.get带header
2020/05/05 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
高中微机老师自我鉴定
2014/02/16 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
学习十八大的心得体会
2014/09/01 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2015入党个人自传范文
2015/06/26 职场文书
酒店厨房管理制度
2015/08/06 职场文书
勤俭节约主题班会
2015/08/13 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python
Python实现简单得递归下降Parser
2022/05/02 Python