<!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的选项卡效果
Vue3中的Ref与Reactive:深入理解响应式编程
前言Vue 3是一个功能强大的前端框架,它引入了一些令人兴奋的新特性,其中最引人注目的是ref和reactive。这两个API是Vue 3中响应式编程的核心,本文将深入探讨它们的用法和差异。
玩转Vue3之Composables
前言Composables 称之为可组合项,熟悉 react 的同学喜欢称之为 hooks ,由于可组合项的存在,Vue3 中的组件之间共享状态比以往任何时候都更容易。这种新范例引入了一种更有组织
初识JavaScript逆向——以网易云音乐和招标网站为例
前言:需要掌握一定的JavaScript基础,能看懂基础的JavaScript代码。我们平常在浏览网站的时候会看到许多加密的参数,如果需要知道它的原始数据,就需要知道整个加密过程,所以本篇文
答应我,在vue中不要滥用watch好吗?
前言上周五晚上8点,开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求,并且维护这一块业务的同事已经下班走了,所以只有我来做。虽然内心一万头草泥
Vue 3 的 setup语法糖到底是什么东西?
前言我们每天写vue3项目的时候都会使用setup语法糖,但是你有没有思考过下面几个问题。setup语法糖经过编译后是什么样子的?为什么在setup顶层定义的变量可以在template中可以
使用jQuery实现复选框选中状态的实时更新
在Web开发中,常常会遇到需要对复选框选中状态进行实时更新的情况。通过使用jQuery,我们可以很方便地实现实时更新复选框选中状态的功能。下面将介绍如何使用jQuery来完成这个
简明指南:使用 jQuery 改变表格行属性值的方法
标题:简明指南:使用 jQuery 改变表格行属性值的方法在网页开发过程中,经常会遇到需要动态改变表格行属性值的情况。jQuery作为一个流行的JavaScript库,可以很方便地实现这一功能
jQuery技巧:掌握在div中添加标签的方法
标题:jQuery技巧:掌握在div中添加标签的方法在网页开发中,经常会遇到需要动态添加标签到页面中的情况。使用jQuery可以方便地操作DOM元素,实现快速的标签添加功能。本文将介绍如
jQuery中get和post方法的区别解析
jQuery中get和post方法的区别解析在使用jQuery来进行Ajax请求时,我们经常会用到get和post方法来获取或提交数据。虽然它们都是用来发送Ajax请求的方法,但在实际应用中有着一些
jQuery中如何实现select元素的改变事件绑定
jQuery是一个流行的JavaScript库,可以用来简化DOM操作、事件处理、动画效果等。在web开发中,经常会遇到需要对select元素进行改变事件绑定的情况。本文将介绍如何使用jQuery实
let、var和const的区别与特点:它们分别代表什么含义?
在JavaScript中,let、var和const是用于声明变量的关键字。它们各自具有不同的区别和特点。 let:
let关键字是ES6引入的,它允许我们声明一个块级作用域的变量。块级作用域是指变
JavaScript 的新数组分组方法
对数组中的项目进行分组,你可能已经做过很多次了。每次都会手动编写一个分组函数,或者使用 lodash 的 groupBy 函数。好消息是,JavaScript 现在有了分组方法,所以你再也不必这样
零基础入门Vue之画龙点睛——再探监测数据
追忆上一节:零基础入门Vue之影分身之术——列表渲染&渲染原理浅析虽然我深知,大佬告诉我”先学应用层在了解底层,以应用层去理解底层“,但Vue的数据如何检
从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/vue-ts-scaffold 目录 前言 脚手架技术栈简介 vue3 TypeScript Pinia Tailwind CSS Element Plus vite
uni-app+vue3会遇到哪些问题
已经用 uni-app+vue3+ts 开发了一段时间,记录一下日常遇见的问题和解决办法uni-app 中的单端代码uni-app 是支持多端,如果你想让你的代码,只在部分平台使用,那么就需要用的它的
VUE3子表格嵌套分页查询互相干扰的问题解决
VUE3在表格中嵌套子表格
子表格的分页查询互相干扰的问题解决简单嵌套如果不需要做子表格的分页查询,那么可以直接在主表格中嵌套子表格,有两种方式;一种是主表格加载的同时加
NextJs 与 Tailwind 入门开发笔记
前言距离上次更新已经过去好久了,之前我在 StarBlog 博客2023年底更新一览的文章里说要使用 Next.js 来重构博客前端,最近也确实用 next.js 做了两个小项目,一个是单点认证项目
JS的垃圾回收机制
垃圾回收是计算机编程中的一个术语,用来描述查找和删除那些不再被其他对象引用的对象的处理过程。换句话说,垃圾回收是删除任何其他对象未使用的对象的过程。如果没有垃圾回收
Gin 框架之jwt 介绍与基本使用
目录 一.JWT 介绍 二.JWT认证与session认证的区别 2.1 基于session认证流程图 2.2 基于jwt认证流程图 三. JWT 的构成 3.1 header : 头部 3.2 payload : 负载 3.
详细介绍 TypeScript 函数的各种特性、用法和最佳实践
TypeScript 是一种在 JavaScript 基础上构建的编程语言,它为 JavaScript 提供了静态类型检查和更强大的面向对象编程能力。函数作为编程语言中的基本构建块,在 TypeScript 中
根据select的data-*属性更改图片img的src链接JQ实例
直接上实例代码:<img id="brandIcon" src="" /> <script language="JavaScript" type="text/javascript" > function setBeerIcon() { var classimg = $("#beer").fi
lottie 动画在 vue 中的使用
前言最近我所负责的项目中,我采用了动画效果,并开始使用 gif 来实现。然而,在实践过程中,我发现 gif 格式的动画在 git 中出现了明显的锯齿感,这让我非常困扰。为了追求更完美的
vue3+ts打开echarts的正确方式
准备工作1. 注册为百度地图开发者官网地址,然后在 应用管理 -> 我的应用 里,创建应用,创建好后复制 AK
2. 在根目录的 index.html 里引入百度地图<head> <meta charset="UTF-8
React 类组件转换为函数式
函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件。这篇文章总结了转换的一些通用的步骤和陷阱。通用替换定义从class (\w+) extends
vue 2实战系列 —— 复习Vue
复习Vue近期需要接手 vue 2的项目,许久未写,语法有些陌生。本篇将较全面复习 vue 2。Tip: 项目是基于 ant-design-vue-proant-design-vue-pro由于 cms 是基于这个项目开发的,所
node node-sass sass-loader版本兼容问题
相关概念sassSass是一种预处理器脚本语言,可以解释或编译成层叠样式表(CSS)。Sass包含两种语法:较旧的语法使用缩进将代码块和换行符分隔为单独的规则;较新的语法SCSS使用像CSS这
Next.js 开发指南 初始篇 | Next.js CLI
前言欢迎学习 Next.js!在学习具体的知识点之前,我们先来创建一个 Next.js 项目。创建了可运行的项目,才能在学习的时候边调试边理解,从而达到事半功倍的效果。幸运的是,Next.js
扩展 jQurey.i18n.properties 的能力来向 vue-i18n 靠齐
jQuery.i18n.properties 是 jQuery 老项目的国际化框架,其实国际化方案本质上都大同小异,都是需要用翻译函数包裹词条,然后根据词条文件来进行翻译就是使用上与其他框架不太一
vue模板的首次渲染,和重新渲染,有哪些区别?
搞明白这个,能帮助我们理解开发中出现的很多问题。一、我们先来回顾一下vue模板的渲染过程:(1)执行render函数,生成虚拟DOM。render函数是根据render、templete、el这三个选项得
直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!
前言在日常开发中vue的模版语法在大多数情况都能够满足我们的需求,但是在一些复杂的业务场景中使用模版语法就有些麻烦了。这个时候灵活的JSX/TSX渲染函数就能派上用场了,大多
jQuery常用知识点大总结
jQueryjQuery介绍1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。2.jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极
jQuery 禁止子元素响应父元素点击事件
当我们父元素和子元素都绑定了 click 点击事件后,父元素的点击事件就会覆盖掉子元素的绑定的点击事件,为此我们就需要避免子元素响应父元素的点击事件,从而进行子元素的交互和
使用 jQuery 添加网页锚文本平滑滚动效果
我们浏览一些网站的时候,会发现点击导航条上的链接的时候,页面会非常平滑的滚动网页下面相应的位置,相对于浏览器默认的一下子跳过去,用户体验无疑友好了许多,其实显示这种效果只
WordPress加速:jQuery库的选择,若CDN资源失效则自动切换本地jQuery文件
现在基本上大部分的wordpress主题都会加载jQuery库 以实现某些特定的网站功能效果。这个jQuery库,有的是从外部引用,有的是外部先下载然后上传到自己的网站进行调用。不过一般
解决JQuery 1.8 Syntax error,unrecognized expression兼容问题
这是一篇比较老的文章,收集过来主要是为了大家作为借鉴。最近有部分童鞋反应其WordPress升级到了3.5版之后,页面上貌似出现了点问题,如文章归档页面无法点击伸展收缩,页面顶部的
Discuz调用jQuery冲突的解决办法
将jquery.js在common.js之后载入,在调用jQuery的函数前使用一下代码:jQuery.noConflict();之后便可以使用jQuery()来代替jQuery原来的$()函数,而$()函数则是原来Discuz的$()函
jQuery+CSS3一天时段动画场景切换特效
一款好看的jQuery+CSS3实现的一天时段动画场景切换特效,不同的时段展示不同的风景,黄昏、白天、日落、夜晚动画场景特效。js代码<script>$(".option").on("click", function()
jQuery基于honeyswitch.js仿苹果开关按钮切换效果
这是一款jQuery基于honeyswitch.js仿苹果手机ios系统风格开关按钮切换效果,非常的美观的开关按钮样式,演示里面还有更详细的使用说明。js代码<script src="lib/honeySwitch.js
jQuery点击弹出遮罩层图片放大查看代码
一款十分简单的jQuery点击弹出遮罩层图片放大查看代码,支持鼠标滚动放大缩小图片预览,弹出和关闭图片时还有淡进淡出的过渡效果。js代码<script src="jquery.js"></script><sc
jQuery鼠标滑过导航下拉菜单特效
一款外观十分简洁好看的jQuery鼠标滑过导航下拉菜单特效,鼠标滑过一级导航菜单时,带过渡动画展开二级子菜单,鼠标悬停子菜单也会有简单的缩进动画效果,而且子菜单是多行多列形式