基于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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
Vue中Axios从远程/后台读取数据
2019/01/21 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
如何在python中实现随机选择
2019/11/02 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
大学活动邀请函
2014/01/28 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
培训班主持词
2014/03/28 职场文书
残疾人小组计划书
2014/04/27 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Go语言编译原理之变量捕获
2022/08/05 Golang