2025年2月24日 星期一 甲辰(龙)年 腊月廿四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

jquery实现导航启用数字键盘监听效果

时间:04-05来源:作者:点击数:31

今天写一个案例:就是导航可以用数字键盘来监听,也就是点击数字键盘相应的导航触发并且出现相应的样式。来看代码:

  • <!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时候效果图如下:

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门