jquery实现导航启用数字键盘监听效果 - 麦兜家园

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

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

posted on 2018-02-26 21:05 麦兜家园阅读(538) 评论(0) 收藏举报

刷新页面返回顶部