css+js实现导航栏色块跟随滑动+点击后增加样式

这篇文章,我给大家分享一个导航菜单的效果。用css+JS实现,效果如图:

本例实现效果:当鼠标移动到其他菜单项时,会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后,被点击的菜单名称文字字体会加粗。

现在,看看简单的菜单布局结构:

    <ul><span class="li_bg"></span> <!-- 滑动的背景色 --><li><a href="###">首页</a></li><li><a href="###">热播剧集</a></li><li><a href="###">最新电影</a></li><li><a href="###">影业资讯</a></li><li><a href="###">娱乐八卦</a></li><li><a href="###">明星图库</a></li></ul>

非常清爽简洁的标准菜单结构,css也很简单:

        * {margin: 0px;padding: 0px;}ul {list-style: none;}html,body {height: 100%;width: 100%;background: #ececec;}a {text-decoration: none;}ul {position: relative;            background: #f9f9f9;                      display: flex;width: 50%;border-radius: 25px;height: auto;padding:0px;left: 50%;top: 50%;transform: translate(-50%, -50%);  }ul li {position: relative;z-index: 10;flex: 1;text-align: center;}ul li a {font-size:14px;color: #666;width: auto;height:20px;padding:15px;display: block;text-align: center;transition: all .3s;}ul li a:hover{           text-shadow:0px 0px 15px #fff;           transition: all .3s;}.li_bg {width: 17%;height: auto;display: inline-block;background-color: #ffcc00;box-shadow: 0 0px 15px 0 rgba(255, 204, 0, 0.58);position: absolute;left: 0;top: 0px;bottom: 0px;margin: auto;z-index: 2;border-radius: 25px;            }.this a{  font-weight: 700;  color: #333;}

在css中定义的 .this 就是当li被点击时,给它增加的样式类名,通过修改 .this a 就可以实现点击后想要的效果。我这里就是给字体加粗,改变了字体颜色的深度。

接下来,我们让背景色块跟着鼠标动起来:

        // 需求:鼠标经过哪个导航栏目,背景色滑动过去  var liList = document.getElementsByTagName('li');var bg = document.getElementsByClassName('li_bg')[0];var header = 0;var liLeft = 0;console.log(0);// 添加事件// 遍历li for (var i = 0; i < liList.length; i++) {liList[i].onmouseover = function () {liLeft = this.offsetLeft + (this.offsetWidth - bg.offsetWidth) / 2;}}// 使用定时器setInterval(function () {header = header + (liLeft - header) / 10;bg.style.left = header + 'px';}, 10)

写到这里,背景色块跟随鼠标滑动已经实现了。接下来我们来完善点击后给li增加this属性的的代码:

        $(document).ready(function (){$("li").each(function(index){$(this).click(function(){ $("li").removeClass("this");$("li").eq(index).addClass("this");});});});

这段代码也很容易理解,当那个li项被点击,移除所有li的this类名,然后,给被点击的li增加this类名。

好了,这个例子的效果就完美实现了。需要《css+js实现导航栏色块跟随滑动+点击后增加样式》源码的同学,可以点击下载了。 感谢您阅读本篇,如果对您有所帮助,请收藏+点赞,谢谢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40166.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《数字图像处理与机器视觉》案例四 基于分水岭算法的粘连物体的分割与计数

一、引言 分水岭算法&#xff08;Watershed Algorithm&#xff09;&#xff0c;是一种基于拓扑理论的数学形态学的分割方法&#xff0c;其基本思想是把图像看作是测地学上的拓扑地貌&#xff0c;图像中每一点像素的灰度值表示该点的海拔高度&#xff0c;每一个局部极小值及其影…

SpringBoot 集成Swagger在线接口文档 接口注解

介绍 Swagger接口文档是一种自动生成、描述、调用和可视化的RESTful风格Web服务接口文档的工具。它通过一系列的规范和自动化工具&#xff0c;极大地简化了后端开发人员与前端开发人员之间的协作。 依赖 <!--swagger--> <dependency><groupId>io.springfo…

怎么办理固体废物处理处置工程乙级资质

1. 准备工作 企业法人资格&#xff1a;确保企业具有独立法人资格。 注册资本&#xff1a;注册资本不少于100万元人民币。 社会信誉&#xff1a;企业需具有良好社会信誉。 人员配置&#xff1a; 至少配备14名专业技术人员&#xff0c;其中注册人员10名&#xff0c;非注册人…

「媒体邀约」天津媒体资源?媒体邀约宣传报道

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 天津拥有丰富的媒体资源&#xff0c;利用这些资源进行有效…

保护你的JavaScript项目:使用Yarn进行依赖审计

保护你的JavaScript项目&#xff1a;使用Yarn进行依赖审计 在当今快速发展的软件开发领域&#xff0c;依赖管理是项目成功的关键。Yarn&#xff0c;作为一个高效且可靠的JavaScript依赖管理工具&#xff0c;提供了强大的依赖审计功能来帮助开发者识别和修复安全漏洞。本文将详…

ICMP协议详解及尝试用ping和tracert捕抓ICMP报文

一、ICMP协议 1.1、定义 ICMP&#xff08;Internet Control Message Protocol&#xff0c;互联网控制消息协议&#xff09;是一个支持IP层数据完整性的协议&#xff0c;主要用于在IP主机、路由器之间传递控制消息。这些控制消息用于报告IP数据报在传输过程中的错误&#xff0c…

大气热力学(1)——理想气体

本篇文章源自我在 2021 年暑假自学大气物理相关知识时手写的笔记&#xff0c;现转化为电子版本以作存档。相较于手写笔记&#xff0c;电子版的部分内容有补充和修改。笔记内容大部分为公式的推导过程。 文章目录 1.0 本文所用符号一览1.1 理想气体的状态方程1.2 理想气体的压强…

学会拥抱Python六剑客,提高编程效率

在Python语言中&#xff0c;有六个强大的工具&#xff0c;它们被称为"Python六剑客"。而Python六剑客指的是Python中常用的六种功能强大且灵活的工具&#xff0c;它们分别是“切片&#xff08;Slicing&#xff09;&#xff0c;推导列表&#xff08;List Comprehensio…

C++ 语法

一、头文件与源文件 头文件用于声明函数,类似于java中service层的接口; 源文件用于实现头文件函数,相当于java中serviceImpl层的实现类; 定义接口 实现接口 使用接口 二、指针概述 定义与使用 定义一个指针p用于存a变量的内存地址,即指针就是地址; 解引用可以获取或修改…

Android SurfaceFlinger——创建EGLContext(二十五)

前面文章我们获取了 EGL 的最优配置,创建了 EGLSurface 并与 Surface 进行了关联,然后还需要获取 OpenGL ES 的上下文 Context,这也是 EGL 控制接口的三要素(Displays、Contexts 和 Surfaces)之一。 1)getInternalDisplayToken:获取显示屏的 SurfaceControl 令牌(Token…

40岁以上的中年人很难找到工作

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 你们有没有发现&#xff0c;90%的40岁以上的中年人&#xff0c;为了多挣钱&#xff0c;几乎除了吃饭和睡觉之外&#xff0c;都在拼命加班劳作&#xff0c;只要一停下来&#xff0c;心里就有一种内疚感&#xff0c;…

【Elasticsearch】Elasticsearch动态映射与静态映射详解

文章目录 &#x1f4d1;前言一、Elasticsearch 映射概述1.1 什么是映射&#xff1f;1.2 映射的分类 二、动态映射2.1 动态映射的定义2.2 动态映射的优点2.3 动态映射的缺点2.4 动态映射的应用场景2.5 动态映射的配置示例 三、静态映射3.1 静态映射的定义3.2 静态映射的优点3.3 …

【篇三】在vue3上实现阿里云oss文件直传

之前写了两篇关于文件上传的文章 【篇一】使用springbootvue实现阿里云oss上传 【篇二】使用springbootvue实现阿里云oss文件直传&#xff0c;解决大文件分片上传问题 今天介绍一下在vue3中实现阿里云oss文件直传&#xff0c;主要是基于篇二中的源码进行修改&#xff0c;看具体…

机器学习简介--NLP(二)

机器学习简介 机器学习简介机器学习例子机器学习分类有监督学习有监督学习的应用 无监督学习 机器学习常见概念数据集k折交叉验证过拟合欠拟合评价指标 机器学习简介 机器学习例子 问题&#xff1a; 2&#xff0c;4&#xff0c;6&#xff0c;8&#xff0c;&#xff1f;&#…

【CV炼丹师勇闯力扣训练营 Day22:§7 回溯1】

CV炼丹师勇闯力扣训练营 代码随想录算法训练营第22天 回溯法其实就是暴力查找,回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割…

【Laravel生命周期全景】深入框架的心脏

标题&#xff1a;【Laravel生命周期全景】深入框架的心脏 Laravel是一个优雅的PHP Web框架&#xff0c;为现代Web应用程序的开发提供了丰富的功能和清晰的架构。理解Laravel的生命周期对于开发者来说至关重要&#xff0c;因为它涉及到应用程序从启动到响应请求的每一个环节。本…

Ubuntu18.04新安装--无网络连接、重启黑屏解决教程

一、安装Ubuntu Ubuntu安装需要U盘作为启动盘&#xff0c;在目前教新的电脑中选中GPT作为分区&#xff0c;制作启动盘&#xff0c;其中在安装双系统Ubuntu时&#xff0c;以自定义格式作为存储空间。详细安装过程以以及如何分区请参考下列链接&#xff1a;内含详细安装过程&…

VS Code 常用快捷键大全

Visual Studio Code 是目前最好用的代码编辑器之一。它提供了许多开箱即用的功能以及丰富的第三方扩展&#xff0c;本文将分享常用的 VS Code 快捷键&#xff0c;助你提高开发效率&#xff01; 代码导航 跳转指定行&#xff1a;快速跳转到文件中的指定行&#xff0c;只需按下快…

Unity 数据持久化【PlayerPrefs】

1、数据持久化 文章目录 1、数据持久化PlayerPrefs基本方法1、PlayerPrefs概念2、存储相关3、读取相关4、删除数据思考 信息的存储和读取 PlayerPrefs存储位置1、PlayerPrefs存储的数据在哪个位置2、PlayerPrefs 数据唯一性思考 排行榜功能 2、Playerprefs实践1、必备知识点-反…

Java_网络通信:http和https

HTTP&#xff1a; 是互联网上应用最为广泛的一种网络通信协议&#xff0c;基于TCP&#xff0c;可以使浏览器工作更为高效&#xff0c;减少网络传输。 HTTPS&#xff1a; 是HTTP的加强版&#xff0c;可以认为是HTTPSSL(Secure Socket Layer)。在HTTP的基础上增加了一系列的安全…