基于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 获取LI里的内容
Dec 17 Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
为原生js Array增加each方法
Apr 07 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
Vue二次封装axios为插件使用详解
May 21 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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脚本的10个技巧(1)
2006/10/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php检查页面是否被百度收录
2015/10/28 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
开办化妆品公司创业计划书
2013/12/26 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书