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

                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的切换效果的更多相关文章

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

随机推荐

(82)Wangdao.com第十六天_JavaScript 异步操作
异步操作单线程模型指的是,JavaScript 只在一个线程上运行也就是说,JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待注意,JavaScript 只在一个线程上运 ...
关于SQLite3笔记
sq .help .quit .exit 创建和连接数据库:在linux中 sqlite3 数据库名没有就创建有就连接 .show 显示各种设置的当前值. .echo ON|OFF echo命令 ...
java验证码生成
第一种方式:纯代码先写jsp: 在编写CaptServlet: package cn.itcast.web.controller; import java.awt.Color; import jav ...
Web API Request Content多次读取
使用自宿主OWIN 项目中要做日志过滤器新建类ApiLogAttribute 继承ActionFilterAttribute ApiLogAttribute : ActionFilterAttri ...
luarocks 包管理工具
安装方式:wget http://luarocks.org/releases/luarocks-2.2.2.tar.gz tar zxvf luarocks-2.2.2.tar.gz cd luaro ...
python摸爬滚打之----tcp协议的三次握手四次挥手
TCP协议的三次握手, 四次挥手三次握手过程 1, 服务器时刻准备接受客户端进程的连接请求, 此时服务器就进入了LISTEN(监听)状态; 2, 客户端进程然后向服务器发出连接请求报文, 之后客户端 ...
Java如何获取JSON数据中的值
场景:在接口自动化场景中,下个接口发送的请求参数,依赖上个接口请求结果中的值.需要将获取值作为全局参数引用. import java.io.File; import java.io.FileInput ...
docker制作tomcat镜像
准备cestos镜像.tomcat.jdk cestos是docker pull下来的在/opt/下创建docker:mkdir -p /opt/docker 把tomcat和jdk解压到docke ...
eclipse安装使用fat打jar包
在线安装步骤: eclipse菜单栏 help >software updates >Search for new features to install>new update si ...
numpy（一）
np.zeros(10,dtype=int) #创建全为0的一位数组 np.ones((3,5),dtype=float) #创建3*5的二维全为1的数组 np.full((3,5),3.14) #创 ...

tab切换的效果——仿照今日头条APP的切换效果

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

随机推荐

热门专题