jquery实现导航启用数字键盘监听效果
时间：04-05来源：作者：点击数：
今天写一个案例：就是导航可以用数字键盘来监听，也就是点击数字键盘相应的导航触发并且出现相应的样式。来看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style: none}
.nav{overflow: hidden;margin:30px auto;height:60px;width:600px;}
.nav li{float:left;width:100px;text-align:center;height:60px;line-height:60px;background-color: #00c87a;position: relative}
.nav li a{color:#fff;position:absolute;left:0;width:100%;height:100%;text-decoration: none;z-index: 100}
.nav li span{width:100%;height:100%;position:absolute;left:0;top:60px;background-color: #ff8703;z-index: 10}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="javascript:void(0)">导航1</a>
<span></span>
</li>
<li>
<a href="javascript:void(0)">导航2</a>
<span></span>
</li>
<li>
<a href="javascript:void(0)">导航3</a>
<span></span>
</li>
<li>
<a href="javascript:void(0)">导航4</a>
<span></span>
</li>
<li>
<a href="javascript:void(0)">导航5</a>
<span></span>
</li>
<li>
<a href="javascript:void(0)">导航6</a>
<span></span>
</li>
</ul>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$(".nav li").on("mouseenter",function(){
$(this).children("span").stop().animate({top:0})
}).on("mouseleave",function(){
$(this).children("span").stop().animate({top:60})
});
//启用数字键触发mouseenter事件,离开触发mouseleave事件
//bug：按下键盘不弹起，一直在触发，解决不让触发下一次的问题就是增加节流阀,即设置一个开关，键盘按下去让其为false；弹起为true
var flag=true;
$(document).on("keydown",function(e){
if(flag){
flag=false;
var code = e.keyCode;//获取键盘的code码
if(code>=49 && code<=54){//数字键盘1~6的code是49~54
$(".nav li").eq(code-49).mouseenter();
}
}
});
$(document).on("keyup",function(e){
flag=true;
var code = e.keyCode;
if(code>=49 && code<=54){
$(".nav li").eq(code-49).mouseleave();
}
})
})
</script>
</html>
当点击数字键盘3时候效果图如下：
方便获取更多学习、工作、生活信息请关注本站微信公众号
上一篇:解决$冲突的问题
下一篇:jquery简单几句代码实现星级评论效果
湘公网安备 43102202000103号