基于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 相关文章推荐
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
Dec 28 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
JS动态添加选项案例分析
Oct 17 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
js实现旋转木马效果
Mar 17 Javascript
jQuery实现键盘回车搜索功能
Jul 25 jQuery
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
浅谈PHP的反射API
2017/02/26 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
2013/04/23 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
python复制与引用用法分析
2015/04/08 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python获取代理IP的实例分享
2018/05/07 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python树莓派红外反射传感器
2019/01/21 Python
python实现剪切功能
2019/01/23 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
小组合作学习反思
2014/02/18 职场文书
cf搞笑广告词
2014/03/14 职场文书
中央空调节能方案
2014/06/15 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
工资收入证明
2014/10/07 职场文书
2015年团支部工作总结
2015/04/03 职场文书
2015年行政部工作总结
2015/04/28 职场文书
运动员入场前导词
2015/07/20 职场文书
情感电台广播稿
2015/08/18 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
防止web项目中的SQL注入
2021/12/06 MySQL