基于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 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js 绑定键盘鼠标事件示例代码
Feb 12 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
原生js实现密码强度验证功能
Mar 18 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
php实现购物车功能(下)
2016/01/05 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
JS中数组重排序方法
2016/11/11 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
python正则表达式及使用正则表达式的例子
2018/01/22 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
学校社会实践活动总结
2014/07/03 职场文书
暑期学习心得体会
2014/09/02 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
安全伴我行主题班会
2015/08/13 职场文书
教你用python实现12306余票查询
2021/06/30 Python