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 ...

随机推荐

vue 安装及使用
一, vue.js 2.0 1, cnpm install vue-cli -g 全局安装 2, 运行vue查看安装是否成功(创建vue-cli目录: vue init webpack demo) ...
Tips_一级菜单栏实现
1.纵向 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
Contributed to JFairy
虽然delay了一个多月才看到,但第一次被一个开源项目正式感谢,开心. 其实写过的很多东西都有机会contr的,只是有些是公司代码...
C++调用C语言的库函数
在项目中,使用C语言编写了一个socket后台程序tkcofferd,并且为方便客户端的使用,提供了动态库,其中包含socket接口. 现在的需求是使用qt做一个前端界面,用来展示tkcofferd的 ...
page1201未完成
import java.util.Scanner; /** * @author:李柏宏(LiberHome) * @date:Created in 2019/3/4 20:37 * @descript ...
python opencv 读取USB摄像头的像素问题
问题描述每次调用capture读取video的时候,还回的像素都是640x480,不管是笔记本的摄像头还是USB摄像头,明明我的摄像头是支持130万读取的功能的呀. 问题分析一番查找,关于用ope ...
mvc模式的理解
一开始总是觉得dao层和service层没有区别,甚至觉得service层根本就是多余的,service层就是把dao层的内容调用了一下,然后重写了一次,后来才理解到,dao层是数据链路层,是与数据库 ...
hive时间日期函数及典型场景应用
1.hive取得当前日期时间: 1.1) 取得当前日期: select current_date(); 1.2) 取得当前日期时间: select current_timestamp(); 1.3) ...
idea右键没有svn选项
然后apply,当然也可以只是某些指定的文件夹.project就是当前项目,包括所有的module.
TestNG Suite 运行出现中文乱码如何解决
场景: 用TestNG框架运行测试类,控制台视图输出出现中文乱码. 解决方案: 1.eclipse属性>workspace>other>utf-8 2.修改eclipse.ini 文 ...

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

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

随机推荐

热门专题