滑动导航效果

HAI6545

于 2022-01-19 19:38:34 发布

阅读量238

点赞数 1

分类专栏： JavaScript案例文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122588291

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
        position:relative;
        border-bottom: 3px solid hotpink;
        height: 50px;
    }
    ul li{
        float:left;
        width: 100px;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    ul li a{
        text-decoration: none;
        color: #000;
        display: block;
        width: 100px;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    ul span{
        width: 100px;
        height: 50px;
        position:absolute;
        background-color: skyblue;
        left: 0;
        top: 0;
        text-align: center;
        line-height: 50px;
    }
</style>
<body>
<ul>
    <li>
        <a href="">首页</a>
    </li>
    <li>
        <a href="">公司介绍</a>
    </li>
    <li>
        <a href="">新闻中心</a>
    </li>
    <li>
        <a href="">产品中心</a>
    </li>
    <li>
        <a href="">联系我们</a>
    </li>
    <span>首页</span>
</ul>
</body>

<script src =" https://code.jquery.com/jquery-3.6.0.min.js "></script>
<script>
// 给所有li添加移入事件
$('ul li').mouseover(function(){
    // 获取当前li的左边距离
    // console.log($(this).position());
    var left = $(this).position().left
    // 设置span进行动画
    $('ul span').text($(this).text()).stop().animate({
        left
    }, 500, 'swing', function(){
        console.log(1111);
    })
})
</script>
</html>