今天写一个案例:就是导航可以用数字键盘来监听,也就是点击数字键盘相应的导航触发并且出现相应的样式。来看代码:
- <!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时候效果图如下: