基于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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
javascript 闭包
Sep 15 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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/21 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP解决中文乱码
2017/04/28 PHP
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python tkinter事件高级用法实例
2018/01/31 Python
python实现log日志的示例代码
2018/04/28 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
值传递还是引用传递
2015/02/08 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
《长城》教学反思
2014/02/14 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
初中学校军训方案
2014/05/09 职场文书
模具专业求职信
2014/06/26 职场文书
居安思危观后感
2015/06/11 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server