jquery实现仿视觉中国tab栏切换动画效果

最新推荐文章于 2023-02-16 15:45:14 发布

陈不知代码

最新推荐文章于 2023-02-16 15:45:14 发布

阅读量429

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/CHENC0518/article/details/119876044

版权

效果为点击每个小li时，下面红线会随着所点击小li的位置，进行来回移动。

且长度适应该小li的宽度，包含padding值。

注：该效果比“视觉中国”实现的动画效果好

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈不知代码</title>
    <script src="../js/jquery.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .hezi {
        width: 100%;
        height: 54px;
        border-bottom: 1px solid #000;
    }
    
    .hezi ul {
        margin: 100px auto;
        width: 1200px;
    }
    
    li {
        list-style: none;
        cursor: pointer;
        float: left;
        color: #666666;
        height: 54px;
        line-height: 60px;
        margin-right: 50px;
        text-align: center;
        padding: 0 20px;
    }
    
    ul {
        position: relative;
    }
    
    .dianji {
        color: #fff;
    }
    
    i {
        width: 50px;
        height: 3px;
        position: absolute;
        left: 12px;
        top: 54px;
        background-color: red;
    }
</style>

<body>
    <div class="hezi">
        <ul>
            <li>推荐</li>
            <li>正在流行</li>
            <li>猜你喜欢</li>
            <i></i>
        </ul>
    </div>
    <script>
        $("ul").on("click", "li", function() {
            /* alert("55"); */
            var ju = $(this).offset().left - 165;
            var kuan = $(this).innerWidth();
            $("i").stop().animate({
                width: kuan,
                left: ju
            }, 300);
        })
    </script>
</body>

</html>

心得：通过获取当前小li的宽度，和左边值返回给i，从而实现动画效果。

陈不知代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jquery实现仿视觉中国tab栏切换动画效果

效果为点击每个小li时，下面红线会随着所点击小li的位置，进行来回移动。且长度适应该小li的宽度，包含padding值。注：该效果比“视觉中国”实现的动画效果好代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
复制链接

扫一扫