Mapkey非常好用的键盘插件

收藏

Mapkey是一款基于jQuery的能响应键盘所有按键操作插件，使用起来非常简单，而且可以支持触发按键对应的自定义函数。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

我们举两个例子，第一个按键 "a"到素材火首页。还有个按上下键。

<p>1、按下键盘中的a键，跳转到erdangjiade.com首页。</p> 
  <a id="link" href="http://www.erdangjiade.com">erdangjiade.com首页</a> 
  <br />
  <br /> 
  <p>2、使用键盘方向键↑ & ↓ 或直接按下键盘中的数字看看。</p> 
  <ul id="ul_keys"> 
   <li class="selected"><a href="#">Item 1</a> (1)</li> 
   <li><a href="#">Item 2</a> (2)</li> 
   <li><a href="#">Item 3</a> (3)</li> 
   <li><a href="#">Item 4</a> (4)</li> 
   <li><a href="#">Item 5</a> (5)</li> 
   <li><a href="#">Item 6</a> (6)</li> 
   <li><a href="#">Item 7</a> (7)</li> 
</ul>

接着引用jQuery库和监盘插件：

jQuery

然后我们调用mapkey插件，示例中的js如下：

var cur = 0;
$(function() {
    $("a#link").mapKey("a");
    $.mapKey("down", nextItem, {
        direction: "down"
    });
    $.mapKey("up", prevItem, {
        direction: "down"
    });
    $.mapKey("1",
    function() {
        setItem(1);
    });
    $.mapKey("2",
    function() {
        setItem(2);
    });
    $.mapKey("3",
    function() {
        setItem(3);
    });
    $.mapKey("4",
    function() {
        setItem(4);
    });
    $.mapKey("5",
    function() {
        setItem(5);
    });
    $.mapKey("6",
    function() {
        setItem(6);
    });
    $.mapKey("7",
    function() {
        setItem(7);
    });
});
function nextItem() {
    if (cur < ($("li").length - 1)) {
        cur++;
    } else {
        cur = 0;
    }
    updateItems();
}
function prevItem() {
    if (cur > 0) {
        cur--;
    } else {
        cur = $("li").length - 1;
    }
    updateItems();
}
function updateItems() {
    $("#ul_keys li.selected").removeClass("selected");
    $("#ul_keys li:eq(" + cur + ")").addClass("selected");
}
function setItem(num) {
    cur = num - 1;
    updateItems();
}