tab切换的效果——仿照今日头条APP的切换效果
说点废话;不知道是哪一版本起头条的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)"); //实时改变裁剪的区域
}
})
