tab栏移动简易动画-CFANZ编程社区

只能用作参考作用.方便自己记忆.
<!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>tab切换动画效果</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .footer_top {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background-color: #fec98f;
        border-radius: 0.5rem 0.5rem 0 0;
        position: relative;
    }

    .new {
        font-size: 2.25rem;
        padding: 1rem 0;
    }

    .tabline {
        width: 9rem;
        height: 0.5rem;
        background-color: #999;
        position: absolute;
        top: 4.5rem;
        left: 6.5rem;
        transition: all 0.3s ease;
    }

    body {
        max-width: 750px;
    }
</style>

<body>
    <div class="footer_top">
        <div class="new">新手专区</div>
        <div class="new">大神专区</div>
        <span class="tabline"></span>
    </div>
</body>

<script>
    $('.new').click(function () {
        var index = $(this).index();

        //切换下面的劵
        if (index == 0) {
            $('.tabline').css('left', '6.5rem')
            // $('.tabline').css('left', $('.new').eq(index).offset().left + 'px' )
        }

        else if (index == 1) {
            $('.tabline').css('left', '22rem')
            // $('.tabline').css('left', $('.new').eq(index).offset().left + 'px' )
        }

    })
</script>

<script>
        //设置根目录font-size,1rem=20px
        (function (doc, win) {

            var docEl = doc.documentElement,

                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

                recalc = function () {

                    var clientWidth = docEl.clientWidth;

                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '20px';
                    } else {
                        docEl.style.fontSize = 10 * (clientWidth / 375) + 'px';
                    }
                    /*docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';*/

                };

            if (!doc.addEventListener) return;

            win.addEventListener(resizeEvt, recalc, false);

            doc.addEventListener('DOMContentLoaded', recalc, false);

        })(document, window);


</script>

</html>