基于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 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
原生js实现自定义滚动条
Jan 20 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP中使用curl入门教程
2015/07/02 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
Jquery 弹出层插件实现代码
2009/10/24 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JQuery魔力之$("tagName")与selector
2012/03/05 Javascript
关于textarea提交的内容无法换行的解决办法
2013/04/09 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript 开发工具webstrom使用指南
2014/12/09 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python3 元组tuple入门基础
2020/02/09 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
草船借箭教学反思
2014/02/03 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript