基于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 布尔型分析
Dec 22 Javascript
各种常用浏览器getBoundingClientRect的解析
May 21 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
详解react-redux插件入门
Apr 19 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抓取页面与代码解析 推荐
2010/07/23 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
php实现的顺序线性表示例
2019/05/04 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
解析javascript 实用函数的使用详解
2013/05/10 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
js如何获取网页所有图片
2017/05/12 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
python基础知识小结之集合
2015/11/25 Python
Python中标准模块importlib详解
2017/04/16 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
Python是怎样处理json模块的
2020/07/16 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
两年的个人工作自我评价
2014/01/10 职场文书
ktv筹备计划书
2014/05/03 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2019个人半年工作总结
2019/06/21 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python