基于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 parseInt与Number函数的区别
Jan 21 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
NestJs 静态目录配置详解
Mar 12 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/08 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
简述php环境搭建与配置
2016/12/05 PHP
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
Python  连接字符串(join %)
2008/09/06 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
求网格中的黑点分布
2013/11/06 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
与美同行演讲稿
2014/09/13 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年采购工作总结
2014/11/20 职场文书
2014个人年度工作总结
2014/12/15 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle