<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>今日头条APP顶部点击可居中导航</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #topNav {

            width: 100%;

            overflow: hidden;

            font: 18px;

        }

        #topNav .swiper-slide {

            padding: 0 10px;

            width: auto;

            text-align: center;

        }

        #topNav .swiper-slide span {

            transition: all .3s ease;

            display: block;

        }

        #topNav .active span {

            color: #FF2D2D;

            border-bottom: 3px solid #FF2D2D;

        }

        .tab-list {

            display: none;

        }

    </style>

</head>

<body>

    <div id="topNav" class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide active"><span>首页</span></div>

            <div class="swiper-slide"><span>热点</span></div>

            <div class="swiper-slide"><span>汽车</span></div>

            <div class="swiper-slide"><span>视频</span></div>

            <div class="swiper-slide"><span>社会</span></div>

            <div class="swiper-slide"><span>娱发</span></div>

            <div class="swiper-slide"><span>科技</span></div>

            <div class="swiper-slide"><span>生活</span></div>

            <div class="swiper-slide"><span>敲门</span></div>

            <div class="swiper-slide"><span>理科</span></div>

        </div>

    </div>

    <div class="tab-list-box">

        <div class="tab-list" style="display:block;">内容1</div>

        <div class="tab-list">内容2</div>

        <div class="tab-list">内容3</div>

        <div class="tab-list">内容4</div>

        <div class="tab-list">内容5</div>

        <div class="tab-list">内容6</div>

        <div class="tab-list">内容7</div>

        <div class="tab-list">内容8</div>

        <div class="tab-list">内容9</div>

        <div class="tab-list">内容10</div>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>

    <script type="text/javascript">

        var mySwiper = new Swiper('#topNav', {

            freeMode: true,

            freeModeMomentumRatio: 0.5,

            slidesPerView: 'auto',

        });

        swiperWidth = mySwiper.container[0].clientWidth

        maxTranslate = mySwiper.maxTranslate();

        maxWidth = -maxTranslate + swiperWidth / 2

        $(".swiper-container").on('touchstart', function (e) {

            e.preventDefault()

        })

        mySwiper.on('tap', function (swiper, e) {

            //  e.preventDefault()

            slide = swiper.slides[swiper.clickedIndex]

            slideLeft = slide.offsetLeft

            slideWidth = slide.clientWidth

            slideCenter = slideLeft + slideWidth / 2

            // 被点击slide的中心点

            mySwiper.setWrapperTransition(300)

            if (slideCenter < swiperWidth / 2) {

                mySwiper.setWrapperTranslate(0)

            } else if (slideCenter > maxWidth) {

                mySwiper.setWrapperTranslate(maxTranslate)

            } else {

                nowTlanslate = slideCenter - swiperWidth / 2

                mySwiper.setWrapperTranslate(-nowTlanslate)

            }

            $("#topNav .active").removeClass('active');

            $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active');

            $(".tab-list").eq(swiper.clickedIndex).fadeIn().siblings('.tab-list').hide();

        });

    </script>

</body>

</html>

jq+swiper 实现今日头条App的选项卡效果的更多相关文章

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

    说点废话;不知道是哪一版本起头条的tab切换效果就变了,一直琢磨着这个事,去度娘那里也没有什么结果:正好这两天有空就尝试做了一下:用前端的技术来实现: 先看效果吧:上面的tab随着slide滑动,上面 ...

  2. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码

    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...

  3. 山寨今日头条的标题title效果

    山寨今日头条的标题title效果 效果: 源码: // // ViewController.m // 今日头条 // // Created by YouXianMing on 14/11/26. // ...

  4. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  5. 仿今日头条app手机端顶部触屏滑动导航

    swiper.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. 今日头条移动app广告激活数据API对接完整Java代码实现供大家参考》》》项目随记

    这是自毕业后的第一篇博客,希望自己今后能养成写博客的一个好习惯.最近公司为了加速APP推广,采取在外部平台(如:今日头条)进行广告投放的方式,进行用户引流.因此我们需要对广告的激活数据进行一个检测,跟 ...

  7. 今日头条极速版邀请码以及其它APP邀请码大全

    现在大多手机新闻APP都需要输入码,在网上找了很久,最终找到一个比较全的文章,本人试过,都是可以使用的! 第1个比较好,可边看新闻,边收益!嘻嘻!平时写代码累了,休息刷一下!或者在睡觉前刷新一下,每天 ...

  8. 自定义控件实现-今日头条Android APP图集效果

    前提 产品有个新需求,类似今日头条的图集效果 大致看了下UI,大致就是ViewPager,横向滑动切换图片,纵向滑动移动图片,纵向超过一定距离,图片飞出,图集淡出动画退出,支持图片的双击放大. 思路 ...

  9. 今日头条- iOS客户端 启动速度优化实践

    版权声明 作者:今日头条iOS团队 原文:https://techblog.toutiao.com/2017/01/17/iosspeed/ 应用启动时间,直接影响用户对一款应用的判断和使用体验.头条 ...

随机推荐

  1. How to Use Convolutional Neural Networks for Time Series Classification

    How to Use Convolutional Neural Networks for Time Series Classification 2019-10-08 12:09:35 This blo ...

  2. python dlib学习（五）：比对人脸

    前言在前面的博客中介绍了,如何使用dlib标定人脸(python dlib学习(一):人脸检测),提取68个特征点(python dlib学习(二):人脸特征点标定).这次要在这两个工作的基础之上,将 ...

  3. zz 勵志貼，成功是努力加对的方向

    5-6年工作经验程序员初进大厂,如何适应工作? 李苦李 李苦李 ​ 华为 架构师 318 人赞同了该回答 泻药! 与题主背景非常相似. 本人毕业8年+,普通二本,学历不突出,非计算机专业. 唯一不同的 ...

  4. 笔记-JFB：业务流程梳理

    ylbtech-笔记-JFB:业务流程梳理 1.家政员找工作-->填写基本信息-->上岗申请--> 1.返回顶部 1. 2. 2. 2.返回顶部   3.返回顶部   4.返回顶部 ...

  5. fgets注意事项

    这是yjy的习题库,中途我在使用fgest时颇费了一点心思,特此记录一下. #include <stdio.h> #include <string.h> #include &l ...

  6. 搭建Portainer可视化界面（转）

    转载地址:https://blog.csdn.net/u011781521/article/details/80469804 一.什么是Portainer? Portainer是Docker的图形化管 ...

  7. iOS - 获取当前时间日期星期几

    //获取当前时间日期星期 - (NSString *)getCurrentTimeAndWeekDay { NSArray * arrWeek=[NSArray arrayWithObjects:@& ...

  8. Spark实战系列目录

    1 Spark rdd -- action函数详解与实战 2 Spark rdd -- transformations函数详解与实战(上) 3 Spark rdd -- transformations ...

  9. Linux CentOS7 下无图形界面安装Oracle11G R2版本

    01,系统 Centos7 数据库版本 Oracle_11gR2 ,以及硬件要求 内存不能小于 1G,可用硬盘不小于8G Swap分区空间不小于2G grep MemTotal /proc/memin ...

  10. 如何改变 select 元素的高度

    mozilla 对于美化 select 元素的样式有这样一段描述(用 CSS 美化 Select 元素): 众所周知,select 元素很难用 CSS 进行高效的设计.你可以影响任何元素的某些方面 - ...