<!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. 内存映射文件MappedByteBuffer和Buffer的Scattering与Gathering

    上一篇讲到的DirectByteBuffer继承自MappedByteBuffer 一.MappedByteBuffer MappedByteBuffer的定义: A direct byte buff ...

  2. 前端知识点回顾之重点篇——CSS中flex布局

    flex布局 来源: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 采用 Flex 布局的元素 ...

  3. 蓝牙BLE： ATT协议层中属性(Attribute)

    ATT(Attribute Protocol)属性层是GATT和GAP的基础,它定义了BLE协议栈上层的数据结构和组织方式. 属性(Attribute)概念是ATT层的核心,ATT层定义了属性的内容, ...

  4. 阿里云OSS设置跨域访问 H5的时候

    OSS 提供 HTML5 协议中的跨域资源共享 CORS 设置,帮助您实现跨域访问.当 OSS 收到一个跨域请求(或者 OPTIONS 请求)时,会读取存储空间对应的 CORS 规则,然后进行相应的权 ...

  5. linux命令详解之du命令

    du命令概述du命令作用是估计文件系统的磁盘已使用量,常用于查看文件或目录所占磁盘容量.du命令与df命令不同,df命令是统计磁盘使用情况,详见linux命令详解之df命令.du命令会直接到文件系统内 ...

  6. kotlin基础 尾递归

    尾调用的重要性在于它可以不在调用栈上面添加一个新的堆栈帧——而是更新它,如同迭代一般. 尾递归因而具有两个特征: 调用自身函数(Self-called): 计算仅占用常量栈空间(Stack Space ...

  7. Mac下GoogleChromeHelper占用内存过高 的一个排查过程记录

    测试需要在Mac上装了个虚拟机,结果忘记限制资源了,直接崩溃重启过一次. 后面限制了一下资源,发现内存占用率还是特别高,其中最高的居然是Chrome相关的一个东西.这让我8G内存该如何是好. 于是查了 ...

  8. 010-Spring aop 001-核心说明-拦截指定类与方法、基于自定义注解的切面

    一.概述 面向切面编程(AOP)是针对面向对象编程(OOP)的补充,可以非侵入式的为多个不具有继承关系的对象引入相同的公共行为例如日志.安全.事务.性能监控等等.SpringAOP允许将公共行为从业务 ...

  9. Mybatis出错： Cause: org.apache.ibatis.reflection.ReflectionException: Error instantiating class com.cyf.pojo.User with invalid types () or values ()

    org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: org.apache.ib ...

  10. Jmeter做压力测试

    1)首先双击bin/jmeter.bat 2)创建Thread Group 3)配置HTTP Request 4)配置Aggregate Report 5)配置并发数和并发时间 6)点击绿色按钮,执行 ...