jq+swiper 实现今日头条App的选项卡效果

时间：2019-07-15

阅读：

<!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>

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。本文作者：佳岚可编辑表格在数栈产品中是一种

2024-08-08 21:54:40

JavaScript语言特性 - 类型转换JavaScript这门语言的类型系统从来没有它表面看起来的那样和善，虽然比起Java、C#等一众强类型语言，它的弱类型使用起来似乎是如此便利，但正因为

2024-06-12 11:51:29

目录前言一、为什么要自定义表列模版？二、实现步骤1.封装表格组件2.父组件引用总结前言日前vue3项目中用element-ui表格封装一个组件，有自定义表列格式的需求，做完后顺手总结一

2024-06-10 00:14:50

在前端开发中，src 属性指定的相对路径是相对于当前 HTML 文件的路径，而不是相对于网站的根目录。这种相对路径的解析方式是浏览器的行为。当浏览器解析 HTML 文件中的 <script

2024-06-10 00:14:48

目录介绍一、实现原理二、代码(vue3 setup)三、演示：四、结束介绍本前端仔在做页面跳转的时候，被要求跳转到页面时候，把对应部分的内容自动滚动到顶部~我一开始想到的就是根据

2024-06-10 00:14:46

目录功能分析功能实现初始化组件分析具体操作Calendar / CalendarCom.vueCalendar / CalendarMonth.vueCalendar / HeaderCom.vue小结总结功能分析目前学到功能有以下几点日

2024-06-10 00:14:43

目录一、打包vue3项目1、打包2、解决打包后的文件的白屏问题。二、打包成apk1、创建“5+App”项目2、打包文件移动3、生成apk文件三、生成apk附：vue项目打包时报错

2024-06-10 00:14:40

Vue路由懒加载是一种优化技术，旨在减少应用程序的初始加载时间并提高性能。具体来说，它允许我们在用户实际需要访问某个路由时，才加载对应的组件代码，而不是在应用程序启动时一

2024-06-10 00:14:37

目录前言一、插件安装二、数据准备三、插件引入四、导出前数据处理1、按exceljs格式创建导出函数2、表头及列宽数据预处理2.1 处理逻辑3、单元格样式处理函数4、表头数据填

2024-06-10 00:14:35

目录背景1. 监听文件选择2. 捕获视频帧3. 绘制视频帧4. 实现效果结论背景在网页开发中，我们经常需要对媒体文件进行处理，其中包括视频文件。有时候，我们可能需要从视频中提取特

2024-06-10 00:14:33

一、在项目中安装mysql 和 expresscnpm install mysql express --save二、示例代码const express = require("express"); const app = express(); const mysql = require("m

2024-06-10 00:14:31

目录1.问题描述1.1使用npm install后报错2.解决问题过程2.1看网上大部分的解决方式是：2.2网上还有部分的解决方式是：2.2.1如果你不幸的按照网上使用npm uninstall -g npm升级

2024-06-10 00:14:29

目录一、什么是跨域？二、跨域解决方案方案一：jsonp （json with padding）方案二：CORS (CROSS-Origin Resource Sharing 跨域资源共享)和跨域CORS有关的几个请求头和响应头请求头

2024-06-10 00:14:25

目录一、什么叫懒加载二、懒加载的优点三、为什么使用懒加载懒加载原理是什么四、vue中如何实现懒加载五、js---懒加载的实现步骤？懒加载代码实现方式一：原生js方式二： getB

2024-06-10 00:14:22

目录引言解决方案一、使用整数进行计算二、使用库函数三、四舍五入优缺点分析1、整数计算方法2、使用库函数方法3、四舍五入方法结论引言在 JavaScript 中，处理浮点数时经常

2024-06-10 00:14:18

目录一、水印概括1. 添加水印的好处2. 添加水印的坏处二、技术方案1. watermark 第三方库2. JS 简单实现水印功能三、水印功能实现1. 水印功能需求2. 功能实现3. 步骤解析3.

2024-06-10 00:14:16

目录前言StatusBar高度TitleBar高度编写Navbar组件使用最终效果前言自定义 navbar 应该是很常见的需求。要自定义一个 navbar 并不难，只需要了解其组成部分即可。从上面的图

2024-06-10 00:14:13

目录axios 的 2 种使用方式请求方法别名Axios 类Axios.prototype.request()axios.defaults/interceptors请求方法别名导出 axios如果直接导出 Axios总结本文我们将讨论 axio

2024-06-10 00:14:11

目录一.WebSocket 简单介绍1.HTTP和WebSocket的区别2.WebSocket应用场景二.js使用WebSocket1.创建WebSocket实例2.属性3.方法4.事件5.使用示例一.WebSocket 简单介绍1.HTTP

2024-06-10 00:14:10

目录精度问题控制台图样01.引入Decimal.js02.使用加减乘除全上附：Vue项目完整例子总结精度问题控制台图样如果银行的业务你这样做，不知道要损失多少钱，这样是不行的，计算的不准

2024-06-10 00:14:07

在前端开发中，我们时常需要处理文件上传和下载的功能。有时，用户可能希望将多个文件打包成一个zip文件以便于下载。我这里分享一个使用Vue3和JSZip库在浏览器端实现zip文件压

2024-06-10 00:14:04

目录axios 拦截器简介Axios 实例拦截器类拦截器实现原理收集拦截器拼接请求链由请求链结构看错误处理第一个请求拦截器出错最后一个请求拦截器出错axios 请求出错响应拦截器

2024-06-10 00:14:02

目录1. 什么是二值化2. 二值化的作用3. 二值化的实现4.代码实现1. 什么是二值化图像二值化就是将图像上的像素点的“灰度值”设置为[0, 0, 0]或[255, 255, 255]，即

2024-06-10 00:14:00

目录一、打印预览表格列不全（Element的el-table组件）1、打印设置“打印缩放”2、修改el——table的底层代码（如果页面上有多个表格慎用）二、如何解决vue p

2024-06-10 00:13:57

实现效果// template<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container"> <span

2024-06-10 00:13:55

vue3中element Plus插槽，实现代码如下所示： <el-table-column property="" label="操作" width="200" show-overflow-tooltip> <template

2024-06-10 00:13:52

目录一、下载二、请求三、示例总结一、下载在 JavaScript 中，可以使用浏览器提供的 Blob 对象和 URL.createObjectURL() 方法来实现文件流下载。下面是一个示例代码，可以帮助

2024-06-10 00:13:50

目录封装成方法Javascript封装成一个classTypeScript封装成一个classTypeScript基于泛型FileReader的使用机会很多，但是它是异步的，因此很容易出现回调地狱。我们可以使用asyn

2024-06-10 00:13:48

在我们前端开发过程中相信很多人都是通过console.log来调试我们的代码的，但是当代码复杂度比较高的时候这个方法就比较鸡肋了。这里我来教大家在Webstorm中如何来调试自己的

2024-06-10 00:13:47

目录上传功能介绍一下 POI OOXML 的使用下载模板功能实现上传导入上传功能代码一<el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>

2024-06-10 00:13:43

jQueryjQuery介绍1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极

2019-07-15 19:55:52

当我们父元素和子元素都绑定了 click 点击事件后，父元素的点击事件就会覆盖掉子元素的绑定的点击事件，为此我们就需要避免子元素响应父元素的点击事件，从而进行子元素的交互和

2019-07-14 23:05:50

我们浏览一些网站的时候，会发现点击导航条上的链接的时候，页面会非常平滑的滚动网页下面相应的位置，相对于浏览器默认的一下子跳过去，用户体验无疑友好了许多，其实显示这种效果只

2018-11-14 22:25:27

现在基本上大部分的wordpress主题都会加载jQuery库以实现某些特定的网站功能效果。这个jQuery库，有的是从外部引用，有的是外部先下载然后上传到自己的网站进行调用。不过一般

2018-10-24 23:28:24

这是一篇比较老的文章，收集过来主要是为了大家作为借鉴。最近有部分童鞋反应其WordPress升级到了3.5版之后，页面上貌似出现了点问题，如文章归档页面无法点击伸展收缩，页面顶部的

2018-09-01 01:06:46

将jquery.js在common.js之后载入，在调用jQuery的函数前使用一下代码：jQuery.noConflict();之后便可以使用jQuery()来代替jQuery原来的$()函数，而$()函数则是原来Discuz的$()函

2018-08-27 00:33:51

一款好看的jQuery+CSS3实现的一天时段动画场景切换特效，不同的时段展示不同的风景，黄昏、白天、日落、夜晚动画场景特效。js代码<script>$(".option").on("click", function()

2018-08-26 20:38:50

这是一款jQuery基于honeyswitch.js仿苹果手机ios系统风格开关按钮切换效果，非常的美观的开关按钮样式，演示里面还有更详细的使用说明。js代码<script src="lib/honeySwitch.js

2018-08-26 20:37:17

一款十分简单的jQuery点击弹出遮罩层图片放大查看代码，支持鼠标滚动放大缩小图片预览，弹出和关闭图片时还有淡进淡出的过渡效果。js代码<script src="jquery.js"></script><sc

2018-08-26 20:30:09

一款外观十分简洁好看的jQuery鼠标滑过导航下拉菜单特效，鼠标滑过一级导航菜单时，带过渡动画展开二级子菜单，鼠标悬停子菜单也会有简单的缩进动画效果，而且子菜单是多行多列形式

2018-08-26 20:26:29

2019-07-09

2020-05-22

2021-01-11

2021-02-01

2020-11-04

2020-05-27

2020-02-20

jq+swiper 实现今日头条App的选项卡效果

热点内容

免费资源网

在线工具

扫一扫随时看

本站下载频道