仿网易云音乐app tab栏滑动效果

最新推荐文章于 2022-12-10 23:33:21 发布
祝余、
最新推荐文章于 2022-12-10 23:33:21 发布
阅读量605
点赞数 1
分类专栏： css
本文链接：https://blog.csdn.net/weixin_43978427/article/details/102722718
版权
css 专栏收录该内容
25 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>仿网易云音乐tabbar栏切换效果</title>
        <script src="jquery.min.js"></script>
        <script>
            fnResize()
            window.onresize = function () {
                fnResize();
            }
            function fnResize() {
                var deviceWidth = document.documentElement.clientWidth || window.innerWidth;
                console.log(deviceWidth);
                if (deviceWidth >= 750) {
                    deviceWidth = 750
                } else if (deviceWidth <= 320) {
                    deviceWidth = 320
                }
                document.documentElement.style.fontSize = (deviceWidth / 7.5 * 2) + 'px';
            }
        </script>
    </head>
    <body>
        <div class="body">
            <div class="tabbars">
                <div class="tabbar-item current" οnclick="clickItem(0)">阿切</div>
                <div class="tabbar-item" οnclick="clickItem(1)">日和坊</div>
                <div class="tabbar-item" οnclick="clickItem(2)">一目连</div>
                <div class="tabbar-item" οnclick="clickItem(3)">般若</div>
                <div class="tabbar-item" οnclick="clickItem(4)">玉藻前</div>
                <div class="tabbar-item" οnclick="clickItem(5)">辉夜姬</div>
                <div class="tabbar-item" οnclick="clickItem(6)">奕</div>
                <div class="tabbar-item" οnclick="clickItem(7)">妖刀姬</div>
                <div class="line"></div>
            </div>
            <div class="container">
                <div class="card">内容</div>
            </div>
        </div>
        <script>
            var marginLeft = 0,
                marginRight = 0,
                lineWidth = 0,
                lastIndex = 0,
                toRight = true,
                startX = 0,//开始时手指落点的x坐标
                startY = 0,
                currentX = 0;//当前手指落点的x坐标
                currentY = 0,
                size = 0,//tab数量
                $line = null,
                $current = null,
                flagIndex = 2,//当滑动到下标为(flagIndex+1)的时候修改tabbar栏的left值
                tabsWidth = 0,//tab栏的width
                tabsLastX = 0,
                $tabbarsDom = null;
            $(document).ready(function(){
                $line = $('.line'),
                $current = $('.current');
                marginLeft = parseInt($current.css('margin-left'));
                marginRight = parseInt($current.css('margin-right'));
                lineWidth = $line.width();
                var left = ($current.width() - lineWidth)/2 + marginLeft;
                $line.css('left',left + 'px');
                size = $('.tabbar-item').length;
                $tabbarsDom = $('.tabbars');
                tabsWidth = $tabbarsDom.width();
            })
            function clickItem(index){
                if(lastIndex == index) return;
                toRight = lastIndex < index ? true : false;
                var left = 0;
                var tabsLeft = 0;
                var len2 = 0;
                for(var i = 0; i < index; i++){
                    left += $('.tabbar-item').eq(i).width();
                    if(tabsWidth - tabsLeft <= 375) continue;
                    if(index >= flagIndex && i >= flagIndex){
                        tabsLeft += $('.tabbar-item').eq(i).width();
                    }
                }
                left = marginLeft * (index + 1) + marginRight * index + left + ($('.tabbar-item').eq(index).width() - lineWidth)/2;
                if(toRight){
                    len2 = left + lineWidth-parseInt($line.css('left'));
                    $line.animate({width: len2+'px'},150,'linear');
                }else{
                    len2 = parseInt($line.css('left')) + lineWidth - left;
                    $line.animate({left: left + 'px',width: len2+'px'},150,'linear');
                }
                lastIndex = index;
                $('.tabbars').animate({left: -tabsLeft + 'px'},150,'linear');
                setTimeout(()=>{
                    if(toRight){
                        $line.animate({width: lineWidth+'px',left: left+'px'},150,'linear');
                        $('.card').css({'left':'100%'});
                    }else{
                        $line.animate({width: lineWidth+'px'},150,'linear');
                        $('.card').css({'left':'-100%'});
                    }
                    $('.tabbar-item').eq(index).addClass('current').siblings().removeClass('current');
                    $('.card').animate({left: '0'},500,'linear');
                },150);
            }
            document.getElementsByClassName('card')[0].addEventListener('touchstart',function(e){
                startX = e.targetTouches[0].pageX;
                startY = e.targetTouches[0].pageY;
            })
            document.getElementsByClassName('card')[0].addEventListener('touchmove',function(e){
                currentX = e.targetTouches[0].pageX;
                currentY = e.targetTouches[0].pageY;
            })
            document.getElementsByClassName('card')[0].addEventListener('touchend',function(e){
                if(Math.abs(currentY - startY) < 20 && currentX - startX > 50 && lastIndex > 0){
                    clickItem(lastIndex-1);
                }else if(Math.abs(currentY - startY) < 20 && startX - currentX > 50 && lastIndex < size - 1){
                    clickItem(lastIndex+1);
                }
            })
            document.getElementsByClassName('tabbars')[0].addEventListener('touchstart',function(e){
                tabsLastX = e.targetTouches[0].pageX;
            })
            document.getElementsByClassName('tabbars')[0].addEventListener('touchmove',function(e){
                tabsLeft = tabsLastX - e.targetTouches[0].pageX;
                var left = parseInt($tabbarsDom.css('left'));
                if(left >= 0 && tabsLeft <= 0){
                    $tabbarsDom.css('left', '0px');
                    return;
                }else if((left + tabsWidth) <= 375 && tabsLeft >= 0){
                    $tabbarsDom.css('left', 375 -tabsWidth+'px');
                    return;
                }
                $tabbarsDom.css('left',left - tabsLeft + 'px');
            })
            document.getElementsByClassName('tabbars')[0].addEventListener('touchend',function(e){
                
            })
        </script>
        <style>
            html,body{
                margin: 0;
                padding: 0;
                font-size: .16rem;
            }
            .body{
                width: 100%;
                min-height: 100vh;
                overflow: hidden;
            }
            .tabbars{
                display: flex;
                height: .4rem;
                align-items: center;
                position: relative;
                min-width: 375px;
                max-width: 1000px;
                float: left;
            }
            .tabbars::-webkit-scrollbar{
                display: none;
            }
            .tabbar-item{
                margin: 0 .08rem;
                white-space:nowrap;
                height: .4rem;
                line-height: .4rem;
                font-weight: bold;
                color: #333;
            }
            .tabbars .current{
                color: rgb(81, 81, 255);
                position: relative;
            }
            .line{
                width: .16rem;
                height: .02rem;
                background: #7d7dff;
                position: absolute;
                bottom: 0;
                left: 0.08rem;
            }
            .container{
                margin-top: .6rem;
                width: 100%;
                overflow: hidden;
            }
            .card{
                width: 3.35rem;
                height: 70vh;
                margin: auto;
                background: #c7c7ff;
                box-shadow: 0 .1rem .1rem #c7c7ff;
                border-radius: 3px;
                line-height: 70vh;
                text-align: center;
                color: #FFF;
                font-size: .3rem;
                font-weight: bold;
                position: relative;
                left: 0;
            }
        </style>
    </body>
</html>