基于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"代码
Jan 09 Javascript
jquery中this的使用说明
Sep 06 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
微信小程序实现时间戳格式转换
Jul 20 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 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
239军机修复记
2021/03/02 无线电
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
php SQL Injection with MySQL
2011/02/27 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
中英文求职信范文
2015/03/19 职场文书
2015年工会工作总结
2015/03/30 职场文书
家长通知书家长意见
2015/06/03 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技