基于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 Select操作大集合
May 26 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
在vue中使用jsx语法的使用方法
Sep 30 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jquery的总体架构分析及实现示例详解
2014/11/08 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
简单了解django索引的相关知识
2019/07/17 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python如何进入交互模式
2020/07/06 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
中学教师岗位职责
2013/11/26 职场文书
给民警的表扬信
2014/01/08 职场文书
优秀大学生自荐信
2014/06/09 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
离婚答辩状范文
2015/05/22 职场文书
全网非常详细的pytest配置文件
2022/07/15 Python