基于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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
Vue.js实现大屏数字滚动翻转效果
Nov 29 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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
Python numpy 点数组去重的实例
2018/04/18 Python
详解Python循环作用域与闭包
2019/03/21 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
python interpolate插值实例
2020/07/06 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
水利公司纪检监察自我鉴定
2014/02/25 职场文书
学生自我评语大全
2014/04/18 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
Django程序的优化技巧
2021/04/29 Python
基于Golang 高并发问题的解决方案
2021/05/08 Golang
vue递归实现树形组件
2022/07/15 Vue.js