<!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. java中静态方法中为什么不能使用this、super和直接调用非静态方法

    这个要从java的内存机制去分析,首先当你New 一个对象的时候,并不是先在堆中为对象开辟内存空间,而是先将类中的静态方法(带有static修饰的静态函数)的代码加载到一个叫做方法区的地方,然后再在堆 ...

  2. pycharm安装、首次使用及汉化

    摘自:https://blog.csdn.net/qq_30463497/article/details/84992480 一.下载pycharm安装包打开PyCharm的官方下载地址:http:// ...

  3. 解决Invalid Plugin needs a valid package.json

    首先.npm install -g plugman 然后,plugman   create    --name  [插件名字]    --plugin_id    [插件id] 这样会生成一个除了pa ...

  4. win10 system guard运行时监视器，关闭服务

    这个服务,内存占用了高达21%,造成工作电脑运行缓慢,经常卡死1min,要关闭服务,并不能直接在任务管理器“服务”这里对属性进行修改,会提示“拒绝访问”,即使修改了文件夹属性也不可以,要修改注册表方可 ...

  5. 金钱数友好显示 php版本

    2019年6月28日16:35:10 此方法可扩展性较好 /* * 吧金额数字转成可视化的方便读的汉字表述 */ function amountConversion(float $amount = 0 ...

  6. 【Spring Boot学习之四】Spring Boot事务管理

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 一.springboot整合事务事务分类:编程事务.声明事务(XML.注解),推荐使用注解方式,springboot默 ...

  7. Blazor 机制初探以及什么是前后端分离，还不赶紧上车？

    标签: Blazor .Net 上一篇文章发了一个 BlazAdmin 的尝鲜版,这一次主要聊聊 Blazor 是如何做到用 C# 来写前端的,传送门:https://www.cnblogs.com/ ...

  8. 聚焦JavaScript面向对象的思想

    面向对象是一种软件开发方法,是一种对现实世界理解和抽象的方法,是计算机编程技术发展到一定阶段后的产物.随着时代的发展,计算机被用于解决越来越复杂的问题.一切事物皆对象,通过面向对象的方式,将现实世界的 ...

  9. linux vi/vim 编辑器学习总结

    linux vi/vim 编辑器学习总结 很多时候我们开发人员不可避免的会涉及到项目部署,这个时候使用的就不是我们所熟知的 Windows 和 Mac OS 操作系统了,而是类 Unix 系统.项目部 ...

  10. PHP设计模式 - 中介者模式

    中介者模式用于开发一个对象,这个对象能够在类似对象相互之间不直接相互的情况下传送或者调解对这些对象的集合的修改. 一般处理具有类似属性,需要保持同步的非耦合对象时,最佳的做法就是中介者模式.PHP中不 ...