說點廢話;不知道是哪一版本起頭條的tab切換效果就變了，一直琢磨着這個事，去度娘那里也沒有什么結果；正好這兩天有空就嘗試做了一下；用前端的技術來實現；
先看效果吧；上面的tab隨着slide滑動，上面的字體顏色也會隨着改變,代碼在最后面喲；
一直沒有思路;嘗試遮罩層是不可行的，直到今天早上偶然看見clip這個屬性；就發現一切都好辦了；
clip這個屬性不怎么用到，我對這個屬性，幾乎沒有什么印象，W3C介紹很簡單。
屬性有三個，有用的只有一個rect(10px,10px,10px,10px)，還有兩個就是醬油帝一號inherit；和醬油帝二號auto;醬油帝二號還有點作用，可以用作清空這個屬性;
clip:rect(10px,10px,10px,10px);/*上右下左四個方向的值，實際操作中注意，右和下所相對的距離標准並不是右邊，下邊，而是左邊，上邊；所以這樣寫是什么都沒有的*/
clip:auto;
clip:inherit;
看個例子吧;先看效果；看圖可以知道，inline_box實際剪切的區域只有90*90
.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) }
還有個動畫的例子；
代碼也附上；
<!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)"); //實時改變裁剪的區域
}
})