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)"); //實時改變裁剪的區域 } })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。