JavaScript 实现网页菜单延迟加载效果》

2024-09-06 08:12
文章标签 java 网页 实现 加载 script 效果 菜单 延迟

本文主要是介绍JavaScript 实现网页菜单延迟加载效果》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

一、整体代码结构

二、代码注解

1. HTML 结构部分

2. CSS 样式部分

3. JavaScript 部分

一、整体代码结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- defer延迟加载只针对外引 --><script>//JavaScript延迟加载window.onload=function(){var first_li=document.querySelectorAll(".main>li")for(var i = 0; i<first_li.length; i++){first_li[i].onmouseenter =function(){if(this.querySelector("ul")){// this.querySelector("ul").style.display= "block"//获取盒子的高度var second_li=this.querySelectorAll("ul li")var sum_height = 0for(var j = 0;j < second_li.length; j++){sum_height += second_li[j].clientHeight}this.querySelector("ul").style.height = sum_height+ "px"}}first_li[i].onmouseleave =function(){if(this.querySelector("ul")){// this.querySelector("ul").style.display= "none"this.querySelector("ul").style.height = "0px"//延迟定时器//setTimeoutsetTimeout(function(){var second_ul=document.querySelector(".main ul")for(var m=0;j<second_ul.length;m++){second_ul[m].style.display= "none"}},2000)}}}}</script><style>*{padding: 0;margin: 0;transition:  all 1s ease;}a{text-decoration: none;}li{list-style: none;}.content{margin: 80px auto;background: red;}.main{width: 80%;margin: 0px auto;display: flex;justify-content: space-between;}.main>li{position: relative;}.main>li ul{/* display: none; */height: 0px;position: absolute;background: red;}.main>li a{color: aliceblue;padding: 8px;display: block;}.main>li a:hover{color: red;background: floralwhite;}</style>
</head>
<body><div class="content"><ul class="main"><li><a href="#">首页</a></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li><li><a href="#">网上报告</a><ul><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li><li><a href="#">入学指南</a></li></ul></li></ul></div>
</body>
</html>

二、代码注解

1. HTML 结构部分

  • <meta charset="UTF-8">：设置页面的字符编码为 UTF-8，以支持多种语言字符的显示。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置移动端的视口属性，确保页面在不同设备上都能良好显示。
  • <title>Document</title>：设置页面的标题，显示在浏览器标签页上。
  • <div class="content">：一个容器元素，用于包裹菜单列表。
  • <ul class="main">：主菜单列表，包含多个<li>元素，每个<li>元素代表一个菜单项。

2. CSS 样式部分

  • * { padding: 0; margin: 0; transition: all 1s ease; }：重置所有元素的内边距和外边距为 0，并设置了一个通用的过渡效果，使元素的属性变化更加平滑。
  • a { text-decoration: none; }：去除链接的下划线。
  • li { list-style: none; }：去除列表项的默认标记。
  • .content { margin: 80px auto; background: red; }：设置容器的外边距为上下 80 像素，左右自动居中，并设置背景颜色为红色。
  • .main { width: 80%; margin: 0px auto; display: flex; justify-content: space-between; }：设置主菜单列表的宽度为页面宽度的 80%，水平居中显示，并使用 flex 布局使菜单项平均分布。
  • .main>li { position: relative; }：设置主菜单列表项为相对定位，为子菜单的绝对定位提供参考。
  • .main>li ul { display: none; height: 0px; position: absolute; background: red; }：设置子菜单列表初始状态为隐藏，高度为 0，绝对定位，并设置背景颜色为红色。
  • .main>li a { color: aliceblue; padding: 8px; display: block; }：设置主菜单链接的颜色为白色，内边距为 8 像素，以块级元素显示。
  • .main>li a:hover { color: red; background: floralwhite; }：设置主菜单链接在鼠标悬停时的颜色为红色，背景颜色为花白色。

3. JavaScript 部分

  • window.onload = function () {...}：在页面加载完成后执行的函数。确保页面的 DOM 结构完全加载后再执行 JavaScript 代码，避免因 DOM 元素未加载而导致的错误。
  • var first_li = document.querySelectorAll(".main>li");：使用querySelectorAll方法获取所有类名为main的元素下的直接子元素<li>，即主菜单列表项。
  • for (var i = 0; i < first_li.length; i++) {...}：遍历所有主菜单列表项。
  • first_li[i].onmouseenter = function () {...}：为主菜单列表项添加鼠标移入事件监听器。当鼠标移入时，执行以下操作：
    • if (this.querySelector("ul")) {...}：检查当前主菜单列表项是否包含子菜单<ul>。
    • this.querySelector("ul").style.display = "block";：如果有子菜单，将子菜单的显示属性设置为block，使其显示出来。
    • var second_li = this.querySelectorAll("ul li");：获取当前主菜单列表项下的子菜单列表项。
    • var sum_height = 0; for (var j = 0; j < second_li.length; j++) { sum_height += second_li[j].clientHeight; }：计算子菜单列表项的总高度。
    • this.querySelector("ul").style.height = sum_height + "px";：将子菜单的高度设置为计算得到的总高度，实现子菜单的平滑展开效果。
  • first_li[i].onmouseleave = function () {...}：为主菜单列表项添加鼠标移出事件监听器。当鼠标移出时，执行以下操作：
    • if (this.querySelector("ul")) {...}：检查当前主菜单列表项是否包含子菜单<ul>。
    • this.querySelector("ul").style.height = "0px";：将子菜单的高度设置为 0，使其逐渐隐藏。
    • setTimeout(function () {...}, 1000);：设置一个延迟定时器，在 1 秒后执行回调函数。
    • var second_ul = document.querySelectorAll(".main ul"); for (var j = 0; j < second_ul.length; j++) { second_ul[j].style.display = "none"; }：获取所有主菜单列表项下的子菜单<ul>，并将其显示属性设置为none，确保子菜单完全隐藏。

这篇关于JavaScript 实现网页菜单延迟加载效果》的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1141475。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
C++中unordered_set哈希集合的实现

C++中unordered_set哈希集合的实现

《C++中unordered_set哈希集合的实现》std::unordered_set是C++标准库中的无序关联容器,基于哈希表实现,具有元素唯一性和无序性特点,本文就来详细的介绍一下unorder... 目录一、概述二、头文件与命名空间三、常用方法与示例1. 构造与析构2. 迭代器与遍历3. 容量相关4
阅读更多...
Java中Redisson 的原理深度解析

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、
阅读更多...
C++中悬垂引用(Dangling Reference) 的实现

C++中悬垂引用(Dangling Reference) 的实现

《C++中悬垂引用(DanglingReference)的实现》C++中的悬垂引用指引用绑定的对象被销毁后引用仍存在的情况,会导致访问无效内存,下面就来详细的介绍一下产生的原因以及如何避免,感兴趣... 目录悬垂引用的产生原因1. 引用绑定到局部变量，变量超出作用域后销毁2. 引用绑定到动态分配的对象，对象
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...
Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2