当前位置： 首页 > news >正文

〖大前端 - 基础入门三大核心之JS篇㊽〗- BOM特效开发

news 2026/2/9 21:55:59
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加V！
  • 作者：哈哥撩编程，十余年工作经验, 从事过全栈研发、产品经理等工作，目前在公司担任研发部门CTO。
  • 荣誉：2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。
  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书

文章目录

  • ⭐ BOM特效开发
    • 🌟 返回顶部按钮制作
    • 🌟 楼层导航效果

⭐ BOM特效开发

BOM是指浏览器对象模型（Browser Object Model）。它是JavaScript与浏览器之间的接口，提供了操作浏览器窗口、文档、历史记录等功能的方法和属性。BOM包含一系列对象，如window、document、history、location等，这些对象允许开发者通过JavaScript去操作浏览器的各个部分。例如，通过BOM可以打开和关闭浏览器窗口、获取当前页面的URL、修改浏览器历史记录等。通过BOM，JavaScript可以与用户的浏览器进行交互，实现更丰富的用户体验和功能。

🌟 返回顶部按钮制作

返回顶部的原理：改变document.documentElement.scrollTop属性，通过定时器逐步改变此值，就会以动画形式返回顶部

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 2000px;background-image: linear-gradient(to bottom, white, #ccc, #333);}#backtotop {width: 70px;height: 20px;background-color: orange;position: fixed;right: 100px;bottom: 100px;/*鼠标放上去变小手状*/cursor: pointer;}</style>
</head>
<body><div id="backtotop">返回顶部</div><script>var backtotop = document.getElementById('backtotop');//定义定时器var timer;backtotop.onclick = function () {//设表先关clearInterval(timer);//设置定时器timer = setInterval(() => {document.documentElement.scrollTop -= 100;if (document.documentElement.scrollTop == 0) {clearInterval(timer);};}, 20);}</script>
</body>
</html>

20230428_1345102023428134611

🌟 楼层导航效果

先开了解一个属性——offsetTop属性

DOM元素都有offsetTop属性，表示此元素到定位祖先元素的垂直距离

定位祖先元素：在祖先中，离自己最近的且拥有定位属性的元素

比如下方例子中，ul具有定位属性，则其中p节点的offset属性值是它到ul的垂直距离

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;border: 2px solid orange;margin: 50px auto;}.box ul {list-style: none;padding-top: 20px;position: relative;}.box ul li {margin-top: 10px;}.box ul li p{width: 30px;height: 30px;background-color: yellow;}</style>
</head>
<body><div class="box"><ul><li><p id="para"></p></li></ul></div><script>var para = document.getElementById('para');console.log(para.offsetTop);</script>
</body>
</html>

image-20230428172751257

我们想要获得一个元素到页面最顶端的垂直距离（净top值），就要保证所有的祖先元素不要有定位。

下面我们来做一个简单的楼层导航效果，点击右侧的导航条，可以跳转到页面对应的位置：

20230506_100423202356106411

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {height: 5000px;}.content-part {width: 1000px;margin: 30px auto;background-color: #ccc;font-size: 50px;}.floornav {/* 固定定位 */position: fixed;top: 50%;margin-top: -100px;right: 40px;width: 120px;height: 200px;background-color: orange;}.floornav ul {list-style: none;}.floornav ul li {width: 120px;height: 40px;font-size: 26px;line-height: 40px;text-align: center;/* 小手指针 */cursor: pointer;}.floornav ul li.current {background-color: purple;color: white;}</style>
</head><body><!--制作楼层导航--><nav class="floornav"><ul id="list"><li data-n="热点" class="current">热点</li><li data-n="体育">体育</li><li data-n="财经">财经</li><li data-n="科技">科技</li><li data-n="娱乐">娱乐</li></ul></nav><section class="content-part" style="height:600px;" data-n="热点">热点新闻</section><section class="content-part" style="height:545px;" data-n="体育">体育栏目</section><section class="content-part" style="height:467px;" data-n="财经">财经栏目</section><section class="content-part" style="height:393px;" data-n="科技">科技栏目</section><section class="content-part" style="height:523px;" data-n="娱乐">娱乐栏目</section><script>//获取元素节点var list = document.getElementById('list');var lis = document.querySelectorAll('#list li');var contentParts = document.querySelectorAll('.content-part');//在页面加载好之后，将所有的content-part盒子的offsetTop值推入数组var offsetTopArr = [];for (var i = 0; i < contentParts.length; i++) {offsetTopArr.push(contentParts[i].offsetTop);}offsetTopArr.push(Infinity);  //为了方便在窗口卷动时判断楼层，在后面推入一个无穷大//点击楼层导航页面自动滚动至对应的楼层list.onclick = function (e) {if (e.target.tagName.toLowerCase() == 'li') {//getAttribute表示得到标签身上的某个属性值var n = e.target.getAttribute('data-n');//可以用属性选择器（方括号选择器）来寻找带有相同data-n的content-partvar contentPart = document.querySelector('.content-part[data-n=' + n + ']');//让页面卷动成为这个盒子的offsetTop值document.documentElement.scrollTop = contentPart.offsetTop;//遍历offsetTopArr数组，看看当前的scrollTop的值在哪两个offsetTop之间，说明在哪两个楼层之间for (var i = 0; i < offsetTopArr.length; i++) {if (offsetTopArr[i] == contentPart.offsetTop) {//改变楼层导航的底色为紫色changeLisCur(i);break;}}}};// 窗口的卷动window.onscroll = function () {var scrollTop = Math.ceil(document.documentElement.scrollTop);   // 向上取整，规避滚动时出现的小数误差//遍历offsetTopArr数组，看看当前的scrollTop的值在哪两个offsetTop之间，说明在哪两个楼层之间for (var i = 0; i < offsetTopArr.length; i++) {if (scrollTop >= offsetTopArr[i] && scrollTop < offsetTopArr[i + 1]) {//改变楼层导航的底色为紫色changeLisCur(i);break;}}}// 当前所在楼层var nowfloor = -1;//改变li的curfunction changeLisCur(i) {if (nowfloor != i) {//让全局变量改变为这个楼层nowfloor = i;//设置下标为i的项有currentfor (var j = 0; j < lis.length; j++) {if (j == i) {lis[j].className = 'current';} else {lis[j].className = '';}}}}</script>
</body>
</html>

相关文章：

〖大前端 - 基础入门三大核心之JS篇㊽〗- BOM特效开发

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…...

编程日记 2023/12/8 9:42:27

【扩散模型】ControlNet从原理到实战

ControlNet从原理到实战 ControlNet原理ControlNet应用于大型预训练扩散模型ControlNet训练过程ControlNet示例1 ControlNet与Canny Edge2. ControlNet与Depth3. ControlNet与M-LSD Lines4. ControlNet与HED Boundary ControlNet实战Canny Edge实战Open Pose 小结参考资料 Cont…...

编程日记 2023/12/8 9:40:24

AI并行计算：CUDA和ROCm

1 介绍 1.1 CUDA CUDA&#xff08;Compute Unified Device Architecture&#xff09;是Nvidia于2006年推出的一套通用并行计算架构&#xff0c;旨在解决在GPU上的并行计算问题。其易用性和便捷性能够方便开发者方便的进行GPU编程&#xff0c;充分利用GPU的并行能力&#xff0…...

编程日记 2023/12/8 9:39:23

2023/12/1JAVAmysql(mysql连接,数据定义语言,数据类型,数据操作语言,数据查询语言)

>0...

编程日记 2023/12/8 9:38:22

2023五岳杯量子计算挑战赛数学建模思路+代码+模型+论文

目录 计算力网络&#xff08;CPN&#xff09;是一种新型的信息基础设施&#xff0c;完整论文代码见文末 问题描述 2.1 问题1 2.2 问题2 2.3 问题3 问题1的解答过程&#xff1a; 问题3的解答过程&#xff1a; 决策优化应用场景&#xff1a;人工智能模型超参数调优 背景信…...

编程日记 2023/12/8 9:35:20

生信数据分析高效Python代码

1. Pandas glob获取指定目录下的文件列表 import pandas as pd import globdata_dir "/public/data/" # 获取文件后缀为.txt的文件列表 df_all pd.concat([pd.read_csv(f, sep\t) for f in glob.glob(data_dir *.txt)]) print(df_all)2. 使用 enumerate 函数获取…...

编程日记 2023/12/8 9:34:18

Spring Kafka常用配置详解

目录 前言producer配置consumer 配置listener 配置 前言 在 Spring Kafka 中&#xff0c;主要的配置分为三大块&#xff0c;分别是producer、consumer、listener&#xff0c;下面我们就按模块介绍各个模块的常用配置 producer配置 在 Spring Kafka 中&#xff0c;spring.kaf…...

编程日记 2023/12/8 9:33:16

跨域的多种方案详解

浏览器的同源策略是为了保护用户的安全&#xff0c;限制了跨域请求。同源策略要求请求的域名、协议和端口必须完全一致&#xff0c;只要有一个不同就会被认为是跨域请求。 本文列举了一些处理跨域请求的解决方案&#xff1a; JSONPCORS跨域资源共享http proxynginx反向代理web…...

编程日记 2023/12/8 9:30:13

Java / Scala - Trie 树简介与应用实现

目录 一.引言 二.Tire 树简介 1.树 Tree 2.二叉搜索树 Binary Search Tree 3.字典树 Trie Tree 3.1 基本概念 3.2 额外信息 3.3 结点实现 3.4 查找与存储 三.Trie 树应用 1.应用场景 2.Java / Scala 实现 2.1 Pom 依赖 2.2 关键词匹配 四.总结 一.引言 Trie 树…...

编程日记 2023/12/8 9:26:09

JS/jQuery 获取 HTTPRequest 请求标头?

场景&#xff1a;在jquery封装的ajax请求中&#xff0c;默认是异步请求。 需要定一个秘钥进行解密&#xff0c;所以只能存放在请求头中。然后需要值的时候去请求头中读取。 注意&#xff1a;dataType设置&#xff0c;根据请求参数的格式设置&#xff0c;如果是加密字符串&…...

编程日记 2023/12/8 9:25:08

Leetcode—2034.股票价格波动【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—2034.股票价格波动 算法思想 实现代码 class StockPrice { public:int last 0;multiset<int> total;unordered_map<int, int> m;StockPrice() {}void update(int timestamp, int price) {if(m.count(time…...

编程日记 2023/12/8 9:21:05

【Linux】diff命令使用

diff命令 是一个用于比较两个文件或目录之间差异的命令。它可以显示两个文件之间的行级别差异&#xff0c;并以易于阅读的格式输出结果。 著者 由保罗艾格特、迈克海特尔、大卫海耶斯、理查德史泰尔曼和Len Tower撰写。 diff命令 -Linux手册页 语法 diff [选项] [文件1]…...

编程日记 2023/12/8 9:20:04

讯飞星火认知大模型与软件测试结合，提升软件质量与效率

随着人工智能技术的不断发展&#xff0c;越来越多的企业开始将其应用于软件开发过程中。其中&#xff0c;讯飞星火认知大模型作为一种基于深度学习的自然语言处理技术&#xff0c;已经在语音识别、机器翻译、智能问答等领域取得了显著的成果。而在软件测试领域&#xff0c;讯飞…...

编程日记 2023/12/8 9:19:03

【Flink on k8s】- 4 - 在 Kubernetes 上运行容器

目录 1、准备 k8s 集群环境、Docker 环境 2、启用 kubernetes 2.1 查询 k8s 集群基本状态...

编程日记 2023/12/8 9:17:01

软件重装或系统重装后避免重复踩坑

1. Office软件的坑在于字体又没了 Word字体库默认没有仿宋_GB2312和楷体仿宋_GB2312&#xff0c;需要手动添加。 提供如下两个下载链接&#xff0c;亲测有效&#xff1a; 仿宋_GB2312 楷体_GB2312 安装步骤&#xff1a;解压-复制.ttf文件至C:\Windows\Fonts 持续更新贴~...

编程日记 2023/12/8 9:14:59

【Jmeter】JSON Extractor变量包含转义字符，使用Beanshell脚本来消除

如果使用Jmeter的JSON Extractor提取的变量包含特殊字符&#xff0c;直接引用时会包含转义字符。可以使用Beanshell脚本来进行字符串转换&#xff0c;从而消除这些转义字符。 import com.alibaba.fastjson.JSONObject; import com.alibaba.fastjson.JSONArray; import com.ali…...

编程日记 2023/12/8 9:13:58

GO设计模式——5、建造者模式（创建型）

目录 建造者模式&#xff08;Builder Pattern&#xff09; 建造者模式的核心角色 优缺点 使用场景 注意事项 代码实现 建造者模式&#xff08;Builder Pattern&#xff09; 建造者模式&#xff08;Builder Pattern&#xff09;是将一个复杂对象的构建与它的表示分离&…...

编程日记 2023/12/8 9:12:58

《LeetCode力扣练习》代码随想录——字符串（反转字符串II---Java）

《LeetCode力扣练习》代码随想录——字符串&#xff08;反转字符串II—Java&#xff09; 刷题思路来源于 代码随想录 541. 反转字符串 II 模拟过程 class Solution {public String reverseStr(String s, int k) {if(s.length()1){return s;}char[] chs.toCharArray();for(int i…...

编程日记 2023/12/8 9:11:57

WMMSE方法的使用笔记

标题很帅 原论文的描述WMMSE的简单应用 无线蜂窝通信系统的预编码设计问题中&#xff0c;经常提到用WMMSE方法设计多用户和速率最大化的预编码&#xff0c;其中最为关键的一步是将原和速率最大化问题转化为均方误差最小化问题&#xff0c;从而将问题由非凸变为关于三个新变量的…...

编程日记 2023/12/8 9:09:55

MySQL核心知识点整理大全1-笔记

目录 MySQL 一、MySQL的基本概念 1.数据库 2.表 3.列 4.行 5.主键 6.索引 二、MySQL的安装与配置 1.下载MySQL安装包 2.安装MySQL 3.启动MySQL 4.配置MySQL a.设置监听端口和IP地址 b.设置数据存储路径 c.设置字符集和排序规则 5.测试MySQL 三、MySQL的基本操…...

编程日记 2023/12/8 9:07:53

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

编程新知 2025/12/16 4:45:38

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2026/2/7 8:45:41

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2026/2/4 15:29:40

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2026/1/29 5:26:37

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27