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

已于 2024-09-06 00:26:55 修改
阅读量412 收藏
点赞数 14
文章标签： javascript 前端 html
于 2024-09-05 23:58:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69304031/article/details/141947584
版权

目录

一、整体代码结构

二、代码注解

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 = 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")){
                        // this.querySelector("ul").style.display= "none"
                        this.querySelector("ul").style.height = "0px"

                        //延迟定时器
                    //setTimeout
                        setTimeout(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，确保子菜单完全隐藏。
小刘|
关注
  • 14
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用小程序实现左侧菜单，右侧列表双向联动效果
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
08-25 7162
在小程序开发中，实现双向联动效果，特别是左侧菜单与右侧列表的联动，可以提升用户体验，使用户更加方便地浏览内容。
html滚动效果代码,javascript 实现滚动效果代码整理
weixin_33444829的博客
06-03 1717
1.先写两个最常用最简洁的滚动代码代码如下：水平滚动：水平滚动字幕内容垂直滚动：垂直滚动字内容2.平稳不间断滚动var tm=nullfunction newsScroll() {var scrollimg=document.getElementById("scroll")if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2))s...
javascript延迟加载方式
互联网－从零开始
12-01 9251
网页中通常在head中包含script标签加载js文件，但有些js文件不是很重要，比如网页数据统计的js脚本，就可以在网页显示完之后再慢慢加载，这样也有利于网页的显示效率，别在加载js脚本的过程中，页面显示一片空白。 实现延迟加载的方式有很多种： 1，直接将script节点放置在之前，这样js脚本就会在页面显示出来之后再加载。 2，使用script标签的defer和async属性，defer
layui iframe版点击左侧菜单栏实现加载等待动画
索半斤的博客
06-18 1810
最近做项目使用到了layui，但是很多功能都不太清楚，在这里记录一下。 我使用的是layui iframe版，它是使用lay-href来进行跳转，同时使用标签页来对已打开的框架进行管理。 index.html <div id="LAY_app"> <div class="layui-layout layui-layout-admin"> <!--头部--> <div th:replace="~{public/header::.
动态树形多选菜单——ztree初始化加载和延迟加载
ilovexiaou的博客
07-11 6121
我用到的版本ztree core v3.5.24，需要引入的js，css，jquery.js，jquery.ztree.core.js，jquery.ztree.excheck.js（多选框可选），zTreeStyle.css。 需要注意的指向父节点的pId，我开始写的是pid一开始没注意，默认的是pId，当然可以pIdKey指定自定义的（未测）。还有如果图片没显示肯定是没引入img图片，记得写好路
vue3 图片懒加载的实现
m0_72436362的博客
12-11 1297
vue3 超简单的图片懒加载
ajax实现懒加载的原理,JS实现页面数据懒加载
weixin_29207149的博客
08-05 1030
JS实现页面数据懒加载页面数据懒加载。Div移动到可视区域再去ajax加载内容。最近有需求做页面的多个table用于加载数据，但是用户浏览页面的时候不需要一次将页面所有的东西加载出来，比如页面上3个table就占满了，用户点进去第一眼也就只能看到3个。为了防止一次加载拖慢了页面的速度，所以之后的table我们要懒加载。即该table移动到了可视区域再去异步请求加载数据。以下为目前实现的方法：$(f...
JavaScript -- jQuery网页开发案例笔记
m0_56387086的博客
08-08 1326
常用的JavaScript库：jQuery 、 Prototype 、 YUI 、 Dojo 、Ext JS 、 移动端的zepto这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的。1. 语法animate2. 参数（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。...............
首页性能优化——javascript的按需加载
讨厌走开啦
11-29 5114
首页性能优化有多个不同的方向，对应的优化方案也有所不同，本文主要介绍首页如何在首次加载时减少所依赖javascript文件数量来提升性能，即javascript的按需加载。首先先说明一下javascript按需加载的概念及适用场景：通常一个页面会在header标签里会声明依赖的javascript文件，这些javascript文件可能是jquery、angular、vue这样的框架库，也可能是d3这
实现QQ浏览器官网的左右滑动菜单效果
weixin_42527589的博客
09-04 816
本文还有配套的精品资源，点击获取 简介：通过使用JavaScript库jQuery，QQ浏览器官网实现了左右滑动的菜单交互设计，提升用户体验。该效果通过处理DOM操作、事件处理和动画，实现二级菜单的动态展示。开发者使用CSS定义样式，JavaScript监听用户操作，通过动画方法如 .animate() 来控制菜单滑动。为了兼容不同设备，还可能使用了触摸事件处...
jQuery+CSS实现的网页二级下滑菜单效果
10-23
这样做可以加快页面内容的加载，提高用户体验，因为页面的主体内容可以优先加载并呈现给用户，而不会因等待JavaScript脚本的执行而出现延迟。 希望以上分析和解释，能够帮助理解如何使用jQuery和CSS来实现一个二级...
javascript实现控制的多级下拉菜单
10-23
7. 延迟加载和性能优化：当菜单项非常多或者包含较为复杂的子菜单时，需要考虑菜单的性能优化，比如使用DOM的insertAdjacentHTML方法进行元素的延迟加载，或者通过纯CSS实现无需JavaScript的下拉效果等。 本文介绍...
两款仿Flash效果的Javascript+CSS滑动菜单
01-23
同时，通过延迟加载、减少重绘和回流等技术提高菜单的性能。 通过学习这两款滑动菜单的实现，开发者可以提升自己的前端技能，掌握用非Flash方式创建动态效果的方法。这种技术不仅适用于导航菜单，还可以应用于其他...
仿京东数码网页动态网页效果，纯css+html+JavaScript
07-13
另外，JavaScript还可以配合CSS进行更复杂的动画效果，如轮播图、下拉菜单的展开与关闭等。 4. **响应式设计**: 为了适应不同设备的屏幕大小，网页应该具备响应式设计。利用CSS的媒体查询(`@media` rule)，可以针对...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 400
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2524
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1388
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 498
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值