<!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. MIME类型和Java类型

    MIME类型和Java类型 类型转换Spring Cloud Stream提供的开箱即用如下表所示:“源有效载荷”是指转换前的有效载荷,“目标有效载荷”是指转换后的“有效载荷”.类型转换可以在“生产者 ...

  2. 使用trace文件分析ANR

    2017年02月07日 12:32:45 不死鸟JGC 阅读数 13886更多 分类专栏: Android   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链 ...

  3. XML 中 5 个预定义的实体引用

    < < 小于 > > 大于 & & 和号 &apos; ' 省略号 " " 引号

  4. SNF快速开发平台2019-权限管理模型-记录级-字段级权限实践

    1.1.1  字段级权限 字段级权限适用于对不同人的能否查看或录入不同表不同字段的权限控制. 是否启用字段级权限配置 不启用字段级权限后,[用户权限管理]程序[字段级权限]按钮会隐藏,导致无法给管理其 ...

  5. 重温RabbitMQ

    RabbitMQ是用Erlang语言实现的,它有几个概念broker:消息队列服务器实体exchange:消息交换机,它指定消息按什么规则,路由到哪个队列queue:消息队列,每个消息都会被投入到一个 ...

  6. Win64 驱动内核编程-33.枚举与删除对象回调

    转载:http://www.voidcn.com/article/p-wulgeluy-bao.html 枚举与删除对象回调 对象回调存储在对应对象结构体里,简单来说,就是存储在 ObjectType ...

  7. aps.net StateServer设置

    1.在 system.web节点 加 <sessionState mode="StateServer" stateConnectionString="tcpip=1 ...

  8. Python的网页解析库-PyQuery

    PyQuery库也是一个非常强大又灵活的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严 ...

  9. 如何在Debian 9上安装和使用Docker

    介绍 Docker是一个简化容器中应用程序进程管理过程的应用程序.容器允许您在资源隔离的进程中运行应用程序.它们与虚拟机类似,但容器更便携,更加资源友好,并且更依赖于主机操作系统. 在本教程中,您将在 ...

  10. 【sqlserver】【mysql】用NavicatPremium12把sqlserver的数据迁移到mysql上

    1.在NavicatPremium的mysql,选择到迁移到的表,然后右键[导入向导]