tab切换的效果——仿照今日头条APP的切换效果

时间 2019-11-20

标签 tab 切换效果仿照今日头条 app 繁體版

原文原文链接

说点废话;不知道是哪一版本起头条的tab切换效果就变了，一直琢磨着这个事，去度娘那里也没有什么结果；正好这两天有空就尝试作了一下；用前端的技术来实现；css

先看效果吧；上面的tab随着slide滑动，上面的字体颜色也会随着改变,代码在最后面哟；html

一直没有思路;尝试遮罩层是不可行的，直到今天早上偶然看见clip这个属性；就发现一切都好办了；前端

clip这个属性不怎么用到，我对这个属性，几乎没有什么印象，W3C介绍很简单。面试

属性有三个，有用的只有一个rect(10px,10px,10px,10px)，还有两个就是酱油帝一号inherit；和酱油帝二号auto;酱油帝二号还有点做用，能够用做清空这个属性;数组

clip:rect(10px,10px,10px,10px);/*上右下左四个方向的值，实际操做中注意，右和下所相对的距离标准并非右边，下边，而是左边，上边；因此这样写是什么都没有的*/
clip:auto;
clip:inherit;

看个例子吧;先看效果；看图能够知道，inline_box实际剪切的区域只有90*90app

.box{
                width: 200px;
                height: 200px;    
                background: skyblue;
                position: relative;            
            }
            .box>.inline_box{
                width: 100px;
                height: 100px;
                background: cornsilk;
                position: absolute;
                left: 0;
                top: 0;
                clip:rect(10px 100px 100px 10px)
            }

还有个动画的例子；ide

代码也附上；函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <title></title>
        <style type="text/css">
            @keyframes move{
                0%,100%{
                    clip: rect(0,220px,2px,0);
                }
                25%{
                    clip: rect(0,220px,220px,218px);
                }
                50%{
                    clip: rect(218px,220px,220px,0);
                }
                75%{
                    clip: rect(0,2px,220px,0);
                }
                
            }
            .box{
                position: relative;
                width: 200px;
                height: 200px;
                background: pink;
                margin: 30px auto;
            }
            .line_box{
                position: absolute;
                width: 220px;
                height: 220px;
                left: 0;
                top: 0;
                
                margin-left: -10px;
                margin-top: -10px;
                border: 2px solid skyblue;
                box-sizing: border-box;
                animation: move 10s linear infinite;    
                /*background: red;*/            
                
                
            }
        </style>
    </head>
    <body>
            
        <!--经过clip实现动画效果--><!--clip属性在今天以前历来没用过，对它的印象能够说没有；不知道它是干什么的，今天终于长见识了-->
        <!--clip：裁取绝对定位元素；值：rect;auto;inherit;有用的就只有rect(top,right,left,bottom) 了-->
        <div class="box">
            <div class="line_box"></div>
        </div>        
    </body>
</html>

最后附上tab切换的代码；字体

//  HTML 部分
<div class="subtitle">
            <ul class="list">
                <li de='1'>推荐</li>
                <li de='2'>热门</li>
                <li de='3'>个人</li>
                <li de='4'>本地</li>
                <li de='5'>任务</li>
                <li de='6'>摄影</li>
                <li de='7'>宠物</li>
                <li de='8'>国际</li>
                <li de='9'>国内</li>
                <li de='10'>社会</li>
            </ul>
            <ul class="list2">
                <li de='1'>推荐</li>
                <li de='2'>热门</li>
                <li de='3'>个人</li>
                <li de='4'>本地</li>
                <li de='5'>任务</li>
                <li de='6'>摄影</li>
                <li de='7'>宠物</li>
                <li de='8'>国际</li>
                <li de='9'>国内</li>
                <li de='10'>社会</li>
            </ul>
        </div>
        <div class="content">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" de='1'>Slide 1</div>
                    <div class="swiper-slide" de='2'>Slide 2</div>
                    <div class="swiper-slide" de='3'>Slide 3</div>
                    <div class="swiper-slide" de='4'>Slide 4</div>
                    <div class="swiper-slide" de='5'>Slide 5</div>
                    <div class="swiper-slide" de='6'>Slide 6</div>
                    <div class="swiper-slide" de='7'>Slide 7</div>
                    <div class="swiper-slide" de='8'>Slide 8</div>
                    <div class="swiper-slide" de='9'>Slide 9</div>
                    <div class="swiper-slide" de='10'>Slide 10</div>
                </div>
            </div>
        </div>

//CSS  部分  算了，简单，本身搞定吧

// JS  用到了JQ+swiper+clip ;实现思路，写UL列表，红色的覆盖黑色的标题，每次让红色的剪切显示只有li的宽度

var log = console.log.bind(console);　　　　//简写console.log(),每次写那么长太麻烦了。我也是从面试题上看见的，因此啊，不能轻视细节。
var list2 = $('.list2');　　　　　　　　　　
var _width = $('ul.list li').width();
var _liWidthL = 0;　　　　　　　　　　　　　　//由于这个例子是平移裁剪，主要用到的就是左右边的数据，因此就只声明了这两个。
var _liWidthR = _width + 20;动画

list2.css('clip', "rect(0px " + _liWidthR + "px 44px " + _liWidthL + "px)");　　　　//初始默认裁剪第一个

//第一种方式,实现了随下面滑动而上面的tab有切换改变；　　　　　　
var swiper = new Swiper('.swiper-container', {
// pagination: '.swiper-pagination',
paginationClickable: true,
observer: true,　　　　　　　　　　　　　　//swiper相关参数
onSlideChangeStart:function(swiper){　　//当是slide切换成功后的回调函数；
_liWidthL = (_width + 20) * swiper.realIndex;
_liWidthR = (_width + 20) * (swiper.realIndex + 1);
list2.css('clip', "rect(0px " + _liWidthR + "px 44px " + _liWidthL + "px)"); //slide切换后改变tab裁剪的区域
},
onSliderMove: function(swiper, event) {　　//当slide移动的时候的回调函数
var a = $('.swiper-wrapper').css('transform').replace(/[^0-9\-,]/g, '').split(',');　　　　//获取slide的transform属性，偏移的值，并转换为数组，方便咱们取值操做
var offsetSwiper = a[4];　　　　　　　　　　//主要偏移值；

_liWidthL = parseInt(Math.abs(offsetSwiper) / 8);　　　　　　//tab裁剪偏移根据slide比例进行改变 _liWidthR = _liWidthL + _width + 20; list2.css('clip', "rect(0px " + _liWidthR + "px 44px " + _liWidthL + "px)"); //实时改变裁剪的区域 } })