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实现导航栏色块跟随滑动+点击后增加样式》源码的同学,可以点击下载了。 感谢您阅读本篇,如果对您有所帮助,请收藏+点赞,谢谢!
相关文章:
css+js实现导航栏色块跟随滑动+点击后增加样式
这篇文章,我给大家分享一个导航菜单的效果。用cssJS实现,效果如图: 本例实现效果:当鼠标移动到其他菜单项时,会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后,被点击的菜单名称文字字体会加粗。 现在&…...
AudioLM音频生成模型:技术革新与应用前景
引言 AudioLM作为一种革命性的音频生成模型,结合了深度学习和自然语言处理的先进技术,能够生成高质量、逼真的音频内容。本文旨在深入探讨AudioLM的技术原理、工作机制、应用场景以及其对音频生成领域的深远影响。 AudioLM技术原理 AudioLM音频生成模…...
数据结构教材关于C/C++的研究
变量 指针 引用 变量 普通变量表示一个内存空间,直接printf是内存空间里的值 结构体 定义一个结构体类型变量为什么必须用指针? 因此无法确定结构体需要多少空间,改用指针可以解决这个问题,因为指针的大小是固定的 指针 指…...
【刷题笔记(编程题)05】另类加法、走方格的方案数、井字棋、密码强度等级
1. 另类加法 给定两个int A和B。编写一个函数返回AB的值,但不得使用或其他算数运算符。 测试样例: 1,2 返回:3 示例 1 输入 输出 思路1: 二进制0101和1101的相加 0 1 0 1 1 1 0 1 其实就是 不带进位的结果1000 和进位产生的1010相加 无进位加…...
如何检查购买的Facebook账号优劣?
Facebook 是全球最受欢迎的社交网络之一,为品牌广告提供了巨大的潜力。许多公司和营销人员使用 Facebook 来推广他们的产品和服务,经常会购买账号。当然也分出了很多账号,比如个人号,BM号,广告号,小黑号等等。 但是,有…...
2.2.1 ROS2案例以及案例分析
1.案例需求 需求1:编写话题通信实现,发布方以某个频率发布一段文本,订阅方订阅消息,并输出在终端。 需求2:编写话题通信实现,发布方以某个频率发布自定义接口消息,订阅方订阅消息,并…...
使用 Python 访问 Windows 剪贴板
目录: 使用 Pyperclip 模块使用 clipboard 模块使用 tkinter 模块使用 win32clipboard 模块 使用 Python 将文本复制到剪贴板或从剪贴板读取文本是一项有用的功能,可以提高代码的效率,使不同应用程序之间的数据传输无缝衔接。 使用 Pyperclip…...
手机空号过滤的多种应用场景
手机空号过滤的应用场景主要涵盖以下几个方面,以下是对其应用场景的清晰归纳和分点表示: 电话营销场景: 在电话营销中,使用空号过滤技术可以显著提高营销效率。通过筛选有效手机号码,避免拨打无效号码,每次…...
[Vue学习]生命周期及其各阶段举例
当我们运行vue项目,看到了屏幕上显示的界面,看到了界面上显示的数据和标签,之后将这个界面叉掉,这一过程其实经历了一整个vue的生命周期的四个阶段,即创建阶段、挂载阶段、更新阶段以及销毁阶段, 而对于每个阶段的启动…...
YOLOv5改进 | 损失函数 | EIoU、SIoU、WIoU、DIoU、FocuSIoU等多种损失函数
秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录: 《YOLOv5入门 …...
[leetcode]minimum-absolute-difference-in-bst 二叉搜索树的最小绝对差
. - 力扣(LeetCode) /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(null…...
[ALSA]从零开始,使用ALSA驱动播放一个音频
前言 最近学了不少有关音频相关的,最近搞一下ALSA驱动 安装 参考Linux应用开发【第八章】ALSA应用开发 中提到的ALSA库及工具章节,本文中有比较详细的有关ALSA驱动引用程序怎么安装的,这里不再赘述。 关于ALSA,就当成一个音频…...
自动化设备上位机设计 一
目录 一 设计原型 二 后台代码 一 设计原型 二 后台代码 namespace 自动化上位机设计 {public partial class Form1 : Form{public Form1(){InitializeComponent();}private void Form1_Load(object sender, EventArgs e){}} }namespace 自动化上位机设计 {partial class Fo…...
tampermonkey插件下载国家标准文件
#创作灵感# 最近在一个系统招标正文中看到了一些国家标准,想要把文章下载下来,方便查阅,但是“国家标准全文公开系统”网站只提供了在线预览功能,没有提供下载功能,但是公司又需要文件,在网上找了一些办法&…...
JAVA学习笔记2
一、加号使用 二、数据类型 bit:计算机中的最小存储单位 byte(字节):计算机中基本存储单元,1byte8bit 浮点数符号位指数位尾数位 浮点数默认为double类型...
Unity 解包工具(AssetStudio/UtinyRipper)
文章目录 1.UtinyRipper2.AssetStudio 1.UtinyRipper 官方地址: https://github.com/mafaca/UtinyRipper/ 下载步骤: 2.AssetStudio 官方地址: https://github.com/Perfare/AssetStudio 下载步骤:...
log4j2 对定时异步线程打印的日志进行过滤
log4j2的过滤器有: 官网:Log4j – Log4j Filters (apache.org) 本次不使用自定义的过滤器,使用ScriptFilter对logevent对象中的线程名称进行过滤。 具体修改如下: <!--控制台--><Console name"Console" tar…...
Oracle内部bug导致的19c DG备库宕机
Oracle内部bug导致的19c DG备库宕机 报错信息收集原因与受影响版本Workaround与解决办法报错信息收集 数据库版本: SQL> select banner,banner_full,banner_legacy from v$version;BANNER ----------------------------------------------------------------------------…...
2024 世界人工智能大会暨人工智能全球治理高级别会议全体会议在上海举办,推动智能向善造福全人类
2024 年 7 月 4 日,2024 世界人工智能大会暨人工智能全球治理高级别会议-全体会议在上海世博中心举办。联合国以及各国政府代表、专业国际组织代表,全球知名专家、企业家、投资家 1000 余人参加了本次会议,围绕“以共商促共享,以善…...
【算法专题--栈】用栈实现队列 -- 高频面试题(图文详解,小白一看就懂!!)
目录 一、前言 二、题目描述 三、解题方法 ⭐双栈 模拟 队列 🥝栈 和 队列 的特性 🍍具体思路 🍍案例图解 四、总结与提炼 五、共勉 一、前言 用栈实现队列 这道题,可以说是--栈专题--,最经典的一道题&…...
iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候,难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵,或者买了二手 iPhone 却被原来的 iCloud 账号锁住,这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
C++ 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
css3笔记 (1) 自用
outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size:0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格ÿ…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
Bean 作用域有哪些?如何答出技术深度?
导语: Spring 面试绕不开 Bean 的作用域问题,这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开,结合典型面试题及实战场景,帮你厘清重点,打破模板式回答,…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
