Mapkey是一款基于jQuery的能响应键盘所有按键操作插件,使用起来非常简单,而且可以支持触发按键对应的自定义函数。
HTML
我们举两个例子,第一个按键 "a"到素材火首页。还有个按上下键。
<p>1、按下键盘中的a键,跳转到sucaihuo.com首页。</p>
<a id="link" href="http://www.sucaihuo.com">sucaihuo.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库和监盘插件:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.mapkey.min.js"></script>
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();
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791