基于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 相关文章推荐
js写一个字符串转成驼峰的实例
Jun 21 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jquery图形密码实现方法
2015/03/11 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
js实现日历
2020/11/07 Javascript
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python 常见的反爬虫策略
2020/09/27 Python
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
个人自我鉴定写法
2013/11/30 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
记账会计岗位职责
2014/06/16 职场文书
应届生自荐信
2014/06/30 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2015中秋祝酒词
2015/08/12 职场文书
学习经验交流会总结
2015/11/02 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
python中if和elif的区别介绍
2021/11/07 Python