说点废话;不知道是哪一版本起头条的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:;

                top:;

                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:;

                top:;

                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)"); //实时改变裁剪的区域
		}
	})






												


											
tab切换的效果——仿照今日头条APP的切换效果的更多相关文章
	

    
								
  1. jq+swiper 实现今日头条App的选项卡效果
		
    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
    
		
    2. 
						
  2. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码
		
    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...
    
		
    3. 
						
  3. 山寨今日头条的标题title效果
		
    山寨今日头条的标题title效果 效果: 源码: // // ViewController.m // 今日头条 // // Created by YouXianMing on 14/11/26. // ...
    
		
    4. 
						
  4. Android之仿今日头条顶部导航栏效果
		
    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
    
		
    5. 
						
  5. 仿今日头条app手机端顶部触屏滑动导航
		
    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
    
		
    6. 
						
  6. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】
		
    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
    
		
    7. 
						
  7. 自定义控件实现-今日头条Android APP图集效果
		
    前提 产品有个新需求,类似今日头条的图集效果 大致看了下UI,大致就是ViewPager,横向滑动切换图片,纵向滑动移动图片,纵向超过一定距离,图片飞出,图集淡出动画退出,支持图片的双击放大. 思路  ...
    
		
    8. 
						
  8. [Android] Android 类似今日头条顶部的TabLayout 滑动标签栏 效果
		
    APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等. 本文主要讲的是用:T ...
    
		
    9. 
						
  9. 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
		
    TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 5. Spring 通过 XML 配置 bean （进阶）
			
    1. 设置 bean 的作用域 当通过 Spring IOC 容器创建 bean 实例的时候,不仅可以完成 bean 的实例化,也可以为 bean 指定特定的作用域,Spring 支持以下 5 种作用 ...
    
			
    2. 
						
  2. 顺序表的原理与python中的list类型
			
    数据是如何在内存中存储的? 在32位的计算机上,1个字节有8位,内存寻址的最小单位就是字节.假设我们有一个int类型的值,它从0x10开始,一个int占据4个字节,则其结束于0x13. 那么数据类型有 ...
    
			
    3. 
						
  3. __x__(48)0910第六天__CSS Hack
			
    CSS Hack: 不到万不得已,不要使用.不易于维护. 有一些情况,需要一段特殊代码在遇到特殊浏览器环境才执行,而在其他条件下,不执行. 此时,CSS Hack 就能实现. CSS Hack 实际上 ...
    
			
    4. 
						
  4. react_app 项目开发 (2)_axios_pubsub-js
			
    生产环境打包并运行 yarn run build 会src代码进行打包处理,在内存中生成打包文件 将打包文件保存至内存 yarn global add serve serve -s build 将 b ...
    
			
    5. 
						
  5. jsp模板继承
			
    jsp通过自定义标签实现类似模板继承的效果 关于标签的定义.注册.使用在上面文章均以一个自定义时间的标签体现,如有不清楚自定义标签流程的话请参考这篇文章 http://www.cnblogs.com/ ...
    
			
    6. 
						
  6. PAT甲级1078 Hashing【hash】
			
    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805389634158592 题意: 给定哈希表的大小和n个数,使用 ...
    
			
    7. 
						
  7. 上传及更新代码到github（以及如何在vscode上提交自己的代码）
			
    上传本地代码 第一步:去github上创建自己的Repository,创建页面如下图所示: 红框为新建的仓库的https地址 第二步: echo "# Test" >> ...
    
			
    8. 
						
  8. 关于ico图标
			
    ico图标可以作为网页标签上显示的小logo,比如: 要获取一个网站的ico图标,只需要在url后输入/favicon.ico即可,比如   https://www.baidu.com/favicon ...
    
			
    9. 
						
  9. 有几个PAT
			
    描述 字符串APPAPT中包含了两个单词“PAT”,其中第一个PAT是第2位(P),第4位(A),第6位(T):第二个PAT是第3位(P),第4位(A),第6位(T). 现给定字符串,问一共可以形成多 ...
    
			
    10. 
						
  10. Port Channel and  VPC
			
    1.Port Channel 介绍 Port Channel  简介 绑定多个物理链路(最多8条),到一个单一的逻辑链路,在两个物理设备之间 每个物理端口只能被放入一个port-channel中. 在 ...
    
			
    11.