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

随机推荐

Phone List 字典树 OR STL
Phone List Time Limit: 1 Sec Memory Limit: 128 Mb Submitted: 140 Solved: 35 Description ...
Mysql学习之基础
数据库基础什么是数据库数据库是一个以某种有组织的方式存储数据集合,通常是一个文件或是一组文件,是通过DBMS(数据库管理系统) 来对数据库进行交互的,数据库可以是保存在硬设备上的文件, 也可以不是 ...
__x__(3)0905第二天__W3C标准集合
World Wide Web Consortium 万维网联盟(外语缩写:W3C)标准不是某一个标准,而是一系列标准的集合. 创建于 1994 年,是 Web 技术领域最具权威和影响力的国际中立性技术 ...
[LeetCode] Design HashSet 设计HashSet
Design a HashSet without using any built-in hash table libraries. To be specific, your design should ...
python多进程使用及线程池的使用方法
多进程:主要运行multiprocessing模块 import os,time import sys from multiprocessing import Process class MyProc ...
oracle 安装介绍
oracle 分为客户端和服务器全局数据库是实例名通常就是所说的服务,就是说数据库和操作系统之间的交互用的是数据库实例名导入 sql文件 @路径例如@d:/my.sql [oracle@ ...
生成N位数字随机数
//生成N位的随机数全数字 private string GetRandom(int len) { string k = ""; Random rand = new Random ...
MYSQL转换编码的解决方法
MYSQL转换编码的解决方法一.在utf8的mysql下得到中文‘游客’的gbk下的16进制编码 mysql> SELECT hex(CONVERT( '游客' USING gbk )); ...
技术Leader相关文章和思考
参考文章: 你与优秀的技术Leader之间只差这一个“图谱” 如何成为优秀的技术主管?你要做到这三点
LeetCode 217 Contains Duplicate 解题报告
题目要求 Given an array of integers, find if the array contains any duplicates. Your function should ret ...

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

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

随机推荐

热门专题