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

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

news 2025/7/6 15:21:27
  • 说明：该文属于 大前端全栈架构白宝书专栏，目前阶段免费，如需要项目实战或者是体系化资源，文末名片加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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/7/5 21:18:46

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/7/6 5:08:27

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/7/6 5:52:50

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/6/24 6:43:34

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/7/4 15:12:40

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/7/4 18:26:36

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/6/23 5:12:02

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/7/6 3:50:19