<!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. 荔枝派zero从焊接到跑起linux

    步骤 焊flash芯片(如果大于16M,需要改烧录工具的源码) 焊引脚,为了串口看数据 焊接flash芯片,需要注意1号脚的位置,flash芯片在开发板背面,1号脚位置是靠近麦克风的那边 以下为编译相 ...

  2. Oracle系列十五 控制用户权限

    权限 数据库安全性 --系统安全性 --数据安全性 系统权限: 对于数据库的权限 对象权限: 操作数据库对象的权限 系统权限 超过一百多种有效的权限 数据库管理员具有高级权限以完成管理任务,例如: 创 ...

  3. (转)CMDB介绍

    原文:https://www.cnblogs.com/xuecaichang/p/10265936.html CMDB开发---https://blog.csdn.net/bbwangj/articl ...

  4. 我最近买的书里面带的CD盘，放电脑里后，说是0字节，但是可以播放，不能把里面的东西复制出来

    我最近买的书里面带的CD盘,放电脑里后,说是0字节,但是可以播放,不能把里面的东西复制出来,有track1,track2之类的文件,都只有几十字节大,请问有没有什么方法把里面的音乐复制出来??? 用w ...

  5. WebGL学习笔记（六）：纹理贴图

    只可以绘制纯色的模型是不够的,为了呈现出更真实的模型,我们还需要通过纹理贴图给模型进行上色. 丢失上下文 GPU作为一种公用资源,是会被多个进程同时使用的,在资源不足的情况下(比如PC或手机系统进入休 ...

  6. Docker入门-docker运行springboot应用（二）

    环境准备 jdk8 安装docker 镜像加速器配置 docker私有仓库 springboot工程的jar包 docker部署项目 dockfile Dockfile是一种被Docker程序解释的脚 ...

  7. Ant Design Pro 子界面传值

  8. microsoft vs code 绿化

    下载地址: https://code.visualstudio.com/#alt-downloads 各个版本比较 User Installer System Installer .zip resou ...

  9. MQTT的Res接口发布消息

    MQTT(这里采用的V2版本)发布消息的常见方法: 1.通过MQTT客户端连接MQTT服务器,建立长连接,通过接口发布消息 最常见的客户端: <dependency> <groupI ...

  10. LeetCode第154场周赛（Java）

    估计要刷很久才能突破三道题了.还是刷的太少.尽管对了前两题,但是我觉得写的不怎么样.还是将所有题目都写一下吧. 5189. "气球" 的最大数量 题目比较简单.就是找出一个字符串中 ...