基于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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
koa源码中promise的解读
Nov 13 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
深入理解Python中的内置常量
2017/05/20 Python
Python reduce()函数的用法小结
2017/11/15 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
matplotlib更改窗口图标的方法示例
2021/02/03 Python
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
大学生见习报告范文
2014/11/03 职场文书
干部培训工作总结2015
2015/05/25 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
董事长新年致辞
2015/07/29 职场文书
小学班主任心得体会
2016/01/07 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技