基于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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
如何在微信小程序里面退出小程序的方法
Apr 28 Javascript
vue.js循环radio的实例
Nov 07 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
JavaScript实现移动端拖动元素
Nov 24 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
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/02 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
js中运算符&& 和 || 的使用记录
2014/08/21 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python文件特定行插入和替换实例详解
2017/07/12 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python可迭代对象操作示例
2019/05/07 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
工作时间调整通知
2015/04/24 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书