jquery 随鼠标移动的导航条

最新推荐文章于 2023-03-07 09:53:58 发布

77314

最新推荐文章于 2023-03-07 09:53:58 发布

阅读量465

点赞数

分类专栏：前端学习文章标签： jquery 导航鼠标移动

本文链接：https://blog.csdn.net/qq_14886653/article/details/52612839

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

新学的炫酷特效，分享下，源代码如下：

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />

        <title>首页</title>
        <style>
            * {
                padding: 0;
                margin: 0
            }

            li {
                list-style: none
            }

            a {
                text-decoration: none;
            }

            .nav {
                width: 100%;
                height: 40px;
                margin-top: 100px;
                position: absolute;
                background: #f6f6f6;
                z-index: -2;
            }

            .nav_con {
                width: 1000px;
                height: 40px;
                margin: 0 auto;
                position: relative;
            }

            .nav_con li {
                float: left;
            }

            .nav_con li a {
                display: block;
                padding: 0 30px;
                line-height: 40px;
                color: #333;
            }

            .nav_con li a:hover,
            .nav_con li a.on {
                color: #fff;
            }

            .nav_con .line {
                width: 150px;
                height: 40px;
                background: #35b558;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
        </style>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                var li_width = $(".nav_con li a.on").outerWidth();
                var li_left = $(".nav_con li a.on").position().left;
                $(".nav_con .line").css({
                    width: li_width,
                    left: li_left
                })

                $(".nav_con li").hover(function() {
                    var li_width = $(this).outerWidth();
                    var li_left = $(this).position().left;
                    $(".nav_con .line").stop().animate({
                        width: li_width,
                        left: li_left
                    });

                }, function() {

                    $(".nav_con .line").stop().animate({
                        width: li_width,
                        left: li_left
                    });

                });

            })
        </script>
    </head>

    <body>
        <div class="nav">
            <div class="nav_con">
                <ul class="list">
                    <li>
                        <a href="index.html" class="on">首页</a>
                    </li>
                    <li>
                        <a href="zhiye.html">职业课程</a>
                    </li>
                    <li>
                        <a href="jiuye.html">就业学习</a>
                    </li>
                    <li>
                        <a href="bbs.html">极客社区</a>
                    </li>
                    <li>
                        <a href="jike.html">极客+</a>
                    </li>
                </ul>
                <div class="line"></div>
            </div>
        </div>

    </body>

</html>

原理：穿件一个line，绝对定位，然后通过jquery获取每个nav li的位置及宽度，进行相应的匹配即可。实现移动动画。

77314

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 随鼠标移动的导航条

新学的炫酷特效，分享下，源代码如下：<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>首页</title> <style> * { padding: 0; margin
复制链接

扫一扫

专栏目录