说点废话;不知道是哪一版本起头条的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. python语法_字符编码
			
    二进制: ascll:只能存英文和拉听字符,一个字符占一个字节,8位 gb2312:只能存6700多个中文,1980年 gbk1.0:能存2万多字符,1995年 gbk18030:2000 27000 ...
    
			
    2. 
						
  2. OO第四次博客作业
			
    测试与正确性论证的效果差异及其优缺点 测试是利用测试代码,通过编写测试用例来验证代码是否能正常完成所要求的功能,自动测试相较于正确性论证来说更加的直观,直接测试代码的功能,而正确性论证是在JSF的基础 ...
    
			
    3. 
						
  3. 解决 AutoMapper ProjectTo 不起作用的问题
			
    这两天在一个 ASP.NET Core 项目中遭遇了 AutoMapper ProjectTo 不起作用的奇怪问题,虽然在 ProjectTo 中指定了 DTO ,但 EF Core 生成的 SQL  ...
    
			
    4. 
						
  4. superset安装配置
			
    1.安装操作系统依赖 yum -y install vim net-tools yum upgrade python-setuptools yum -y install gcc gcc-c++ lib ...
    
			
    5. 
						
  5. [05-01]Linux如何重启系统
			
    /* 私人笔记 */ 1.在linux相关路径下J2EE上传代码,指令:svn update : 2. 若项目名在linux中的目录为Scorpius ,跟新代码目录地址为 cd /home/xagd ...
    
			
    6. 
						
  6. 学习ActiveMQ(三)：发布/订阅模式(topic)演示
			
    1.在这个项目中新增两个java类,主题生产者和主题消费者: 2.和点对点的代码差别并不大,所以将消费者和生产者的分别代码拷入新增的java类中,再修改就好了. appProducerTopic代码: ...
    
			
    7. 
						
  7. SCRIPT438: 对象不支持“indexOf”属性或方法
			
    SCRIPT438: 对象不支持“indexOf”属性或方法 indexOf()的用法:返回字符中indexof(string)中字串string在父串中首次出现的位置,从0开始!没有返回-1:方便判 ...
    
			
    8. 
						
  8. ashx获取Oracle数据库图片
			
    using System; using System.Collections.Generic; using System.Linq; using System.Web; using DbLib.db; ...
    
			
    9. 
						
  9. table-一列细分为多列（合并单元格）
			
    这个是一个很常见的一个表格展示需求,其中最要的就两个属性 rowspan 和 colspan .他们分别就是合并行 与 合并列. 要做的效果是如图下面这个,联系电话就是合并了单元格.这个说法类似于ex ...
    
			
    10. 
						
  10. 2016(4)数据库系统，ER模型，规范化理论，并发控制
			
    试题四(共25分) 阅读以下关于数据库设计的叙述,在答题纸上回答问题1至问题3. 某航空公司要开发一个订票信息处理系统,以方便各个代理商销售机票.开发小组经过设计,给出该系统的部分关系模式如下: 航班 ...
    
			
    11.