【jQuery应用】导航栏滑块随鼠标移动

最新推荐文章于 2025-06-06 13:42:00 发布

早起早睡的少年郎

最新推荐文章于 2025-06-06 13:42:00 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery应用文章标签： jquery html 导航栏滑动效果背景滑动

本文链接：https://blog.youkuaiyun.com/ReusLi/article/details/48675925

jQuery应用专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jQuery创建一个导航栏滑块效果。当鼠标悬停在jQuery项上时，导航栏上方的棕色滑块会平滑地移动到该位置，而当鼠标离开时，滑块会返回到原始位置。实现此效果主要依靠jQuery的stop()和animate()方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚写了一个导航栏的效果。为达到的效果是这样的：

当鼠标放在jQuery上面时，Python上方的棕色滑块会滑动到jQuery上方，当鼠标离开导航栏时，滑块重新回到Python上方。

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏滑块随鼠标移动</title>
    <link rel="stylesheet" href="css/jQuery2.css">
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/jQuery2.js"></script>
</head>
<body>

<br><br>
<span>_____________________________________________</span>
<!--设置一个滑块-->
<div class="line"></div>
<!--导航栏-->
<div class="header">
    <!--4个li-->
    <ul>
        <li><a href="#">Bootstarp</a></li>
        <li id="mark"><a href="#">Python</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Angular</a></li>
    </ul>
</div>

</body>
</html>

CSS:

.header{
    width: 100%;
    height: 40px;
    margin: 0 auto;
    padding: 0 auto;

}

.line{
    margin: 0;
    padding: 0;
    width: 100px;
    height: 5px;
    background-color: brown;
    display: block;
    position:relative;
}

body{
    margin: 0 auto;
}

ul,li{
    font-feature-settings: normal;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 40px;
    float: left;
}

li{
    width:100px;
    text-align: center;
    background-color: white;
}

a{
    font-family: tahoma,Arial;
    text-decoration: none;
    color: black;
}

jQuery :

/**
 * Created by ASUS-PC on 2015/9/22.
 */

$(document).ready(function() {
        //把id="mark"的<li>赋值给常量
        var line_reset = $("#mark");

        //将滑块的初始位置定在id="mark"的上方
        $(".line").css("left",line_reset.position().left);

        //当鼠标放在<li>上时
        $("li").mouseenter(function () {
            //鼠标样式变为pointer
            $(this).css("cursor", "pointer");
            //滑块 正在做的所有事情停止（这个是为了保证滑块移动的连贯效果，删去后试下就知道为什么要加了）
            $(".line").stop();
            //滑块 正在做的所有事情停止之后，向鼠标所指的<li>上方移动
            $(".line").animate({left:  $(this).position().left +'px'},350);
        });

        //当鼠标离开<li>时
        $("li").mouseleave(function(){
            ////滑块 正在做的所有事情停止
            $(".line").stop();
            //滑块 回到id="mark"的标签上
            $(".line").animate({left: line_reset.position().left + 'px' },250);
        });
    }
);

主要是stop()函数和animate()自定义动画函数。。