jquery加CSS3实现导航跟随鼠标移动

最新推荐文章于 2022-10-22 16:07:35 发布

yy211zhu

最新推荐文章于 2022-10-22 16:07:35 发布

阅读量2.1k

点赞数 2

分类专栏： Jquery 文章标签： jquery css3

本文链接：https://blog.csdn.net/yy211zhu/article/details/52253251

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

经常看到有的网页导航菜单下有个底部边框跟随鼠标移动到的位置而移动

仔细想了下，如果只用jquery来实现发现会变得复杂，那么我们知道CSS3里有过度属性transition

一.transition属性的使用方法：
- 要实现这一点，必须规定两项内容：
1.规定您希望把效果添加到哪个 CSS 属性上
2.规定效果的时长

例：
div
{
width:100px;
transition: width 2s;
-webkit-transition: width 2s; /* 当鼠标移动到divs上时，div的宽度会逐渐增加到300px */
}
div:hover {width:300px;}

二、demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul, li {
            list-style: none;
        }

        .main {
            margin: 0 auto;
            height: 50px;
            width: 900px;
            position: relative;
        }

        .moveul li {
            font-size: 16px;;
            width: 150px;
            height: 50px;
            line-height: 50px;
            color:#ffffff;
            background-color: #FFCCCC;
            text-align: center;
            float: left;
            cursor: pointer;
        }

        #slidebar {
            height: 2px;
            width: 150px;
            background: #993300;
            position: absolute;
            left: 0px;
            bottom: 0px;
            transition: all .5s;//设置过度时间为0.5秒，all是设置所有的过度属性，如果只想让width有过度效果，只需要transition: width .5s;
        }

        .animatemove {
            left: 150px;

        }
    </style>

    <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $(".moveul li").mouseover(function () {
                var con = $(this).index();
                $("#slidebar").css({
                    left: 150 * con + "px"
                });
            });
            $(".moveul li").mouseleave(function () {
                $("#slidebar").css({
                    left: "0px"
                })
            })
        })
    </script>
</head>
<body>
<div class="main">
    <ul class="moveul">
        <li>首页</li>
        <li>新闻</li>
        <li>体育</li>
        <li>财经</li>
        <li>NBA</li>
    </ul>
    <div id="slidebar">
    </div>
</div>
</body>
</html>