优化了自制的浏览器主页的全屏功能

第一次修改

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全屏功能</title><style>#fullBtn .icon {width: 35px;margin-top: 5px;}#fullBtn .shrink {display: none;}</style>
</head><body><div id="fullBtn" class="divBtn"><!-- 全屏 --><span class="fullScreen"><svg t="1719287647055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="11666" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><pathd="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2zm512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z"fill="#333333" p-id="11667"></path></svg></span> <!-- 全屏 结束--><!-- 收缩 --><span class="shrink"><svg t="1719288607653" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"p-id="14512" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><path d="M884.5 59c44.459 0 80.5 36.041 80.5 80.5v745c0 44.459-36.041 80.5-80.5 80.5h-745C95.041 965 59 928.959 59 884.5v-745C59 95.041 95.041 59 139.5 59h745z m-52.752 520.492H578.492v252.4l0.007 0.587c0.312 13.471 11.33 24.296 24.876 24.296l0.587-0.007c13.471-0.312 24.296-11.33 24.296-24.876l-0.003-167.448 208.267 208.268 0.468 0.455c9.748 9.26 25.159 9.108 34.722-0.455 9.717-9.717 9.717-25.472 0-35.19L663.446 629.257h168.302l0.587-0.006c13.471-0.312 24.296-11.33 24.296-24.876 0-13.742-11.14-24.883-24.883-24.883z m-382.537 0H195.68l-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876l0.007 0.587c0.312 13.471 11.33 24.296 24.876 24.296l165.877-0.001L162.893 828.76l-0.454 0.468c-9.239 9.769-9.055 25.179 0.528 34.722 9.738 9.697 25.493 9.663 35.19-0.074l201.288-202.139v170.605l0.008 0.587c0.312 13.471 11.33 24.295 24.876 24.295 13.742 0 24.882-11.14 24.882-24.882v-252.85z m422.464-427.241c-9.738-9.697-25.493-9.664-35.19 0.074l-208.23 209.108 0.003-172.41-0.007-0.587c-0.312-13.471-11.33-24.295-24.876-24.295-13.742 0-24.883 11.14-24.883 24.882v253.384h253.099l0.587-0.007c13.471-0.312 24.295-11.33 24.295-24.876l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-164.181-0.001 204.339-205.2 0.454-0.469c9.24-9.768 9.055-25.178-0.528-34.721z m-686.14-0.86c-9.769-8.81-24.838-8.512-34.247 0.897-9.717 9.717-9.717 25.472 0 35.19l204.736 204.736-160.344 0.001-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876 0 13.742 11.14 24.883 24.883 24.883h253.503V189.023l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-0.588 0.006c-13.47 0.312-24.295 11.33-24.295 24.876l-0.002 176.203-212.938-212.938-0.468-0.455z"fill="#333333" p-id="14513"></path></svg></span><!-- 收缩 结束--></div><script>// 定义一个窗口加载完毕后的回调函数。window.onload = () => {// 页面内容加载完成后执行// 获取网页中 ID 为 fullBtn 的元素。const fullBtn = document.getElementById("fullBtn");// 获取 fullBtn 元素中的类名为 fullScreen 的第一个子元素。const fullScreen = fullBtn.querySelector(".fullScreen");// 获取 fullBtn 元素中的 类名为 shrink的第一个子元素。const shrink = fullBtn.querySelector(".shrink");// 给全屏按钮添加点击事件监听器fullBtn.addEventListener("click", function () {if (!document.fullscreenElement) {// 如果当前不是全屏状态，则调用开启全屏的函数openFullscreen();// 切换按钮的显示状态toggleButtons();} else {// 如果当前是全屏状态，则调用关闭全屏的函数closeFullscreen();// 切换按钮的显示状态toggleButtons();}});// 切换按钮的显示状态// 1. 函数定义function toggleButtons() {// 2. 切换类名 "shrink" 和 "fullScreen"// 对 fullScreen 元素（全屏按钮）的类列表进行处理。// 如果 fullScreen 元素没有 shrink 类，则添加该类；// 如果 fullScreen 元素有 shrink 类，则移除该类。fullScreen.classList.toggle("shrink");// 对 shrink 元素（收缩按钮）的类列表进行处理。// 如果 shrink 元素没有 shrink 类，则添加该类；// 如果 shrink 元素有 shrink 类，则移除该类。shrink.classList.toggle("shrink");}// 开启全屏功能function openFullscreen() {// 获取文档的根元素 (HTML 元素)const docElm = document.documentElement;// 检查当前浏览器是否支持 requestFullscreen 方法if (docElm.requestFullscreen) {// 调用 requestFullscreen 方法以启动全屏模式docElm.requestFullscreen();} else if (docElm.mozRequestFullScreen) { // 适用于 Mozilla Firefox// 调用 Firefox 的专有全屏方法docElm.mozRequestFullScreen();} else if (docElm.webkitRequestFullScreen) { // 适用于 Chrome, Safari, 和 Opera// 调用 Webkit 内核浏览器（Chrome, Safari, Opera）的专有全屏方法docElm.webkitRequestFullScreen();} else if (docElm.msRequestFullscreen) { // 适用于 IE/Edge// 调用 Microsoft Edge 和的专有全屏方法docElm.msRequestFullscreen();}}// 关闭全屏功能function closeFullscreen() {// 检查当前浏览器是否支持 exitFullscreen 方法if (document.exitFullscreen) {// 调用 exitFullscreen 方法以退出全屏模式document.exitFullscreen();} else if (document.mozCancelFullScreen) { // 适用于 Mozilla Firefox// 调用 Firefox 的专有退出全屏方法document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) { // 适用于 Chrome, Safari, 和 Opera// 调用 Webkit 内核浏览器（Chrome, Safari, Opera）的专有退出全屏方法document.webkitExitFullscreen();} else if (document.msExitFullscreen) { // 适用于 IE/Edge// 调用 Microsoft Edge 和的专有退出全屏方法document.msExitFullscreen();}}}// 全屏功能优化结束</script>
</body></html>

第二次修改减少代码量

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全屏功能</title><style>#fullBtn {.icon {width: 35px;margin-top: 5px;}.shrink {display: none;}}</style>
</head><body><div id="fullBtn" class="divBtn"><span class="fullScreen"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"height="200"><pathd="M0 0v1024h1024V0z m409.6 921.6H102.4v-307.2h102.4v204.8h204.8zM409.6 204.8H204.8v204.8H102.4V102.4h307.2z m512 614.4v102.4h-307.2v-102.4h204.8v-204.8h102.4z m0-614.4v204.8h-102.4V204.8h-204.8V102.4h307.2z"fill="#333333"></path></svg></span><span class="shrink"><svg class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"height="200"><pathd="M884.5 59c44.459 0 80.5 36.041 80.5 80.5v745c0 44.459-36.041 80.5-80.5 80.5h-745C95.041 965 59 928.959 59 884.5v-745C59 95.041 95.041 59 139.5 59h745z m-52.752 520.492H578.492v252.4l0.007 0.587c0.312 13.471 11.33 24.296 24.876 24.296l0.587-0.007c13.471-0.312 24.296-11.33 24.296-24.876l-0.003-167.448 208.267 208.268 0.468 0.455c9.748 9.26 25.159 9.108 34.722-0.455 9.717-9.717 9.717-25.472 0-35.19L663.446 629.257h168.302l0.587-0.006c13.471-0.312 24.296-11.33 24.296-24.876 0-13.742-11.14-24.883-24.883-24.883z m-382.537 0H195.68l-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876l0.007 0.587c0.312 13.471 11.33 24.296 24.876 24.296l165.877-0.001L162.893 828.76l-0.454 0.468c-9.239 9.769-9.055 25.179 0.528 34.722 9.738 9.697 25.493 9.663 35.19-0.074l201.288-202.139v170.605l0.008 0.587c0.312 13.471 11.33 24.295 24.876 24.295 13.742 0 24.882-11.14 24.882-24.882v-252.85z m422.464-427.241c-9.738-9.697-25.493-9.664-35.19 0.074l-208.23 209.108 0.003-172.41-0.007-0.587c-0.312-13.471-11.33-24.295-24.876-24.295-13.742 0-24.883 11.14-24.883 24.882v253.384h253.099l0.587-0.007c13.471-0.312 24.295-11.33 24.295-24.876l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-164.181-0.001 204.339-205.2 0.454-0.469c9.24-9.768 9.055-25.178-0.528-34.721z m-686.14-0.86c-9.769-8.81-24.838-8.512-34.247 0.897-9.717 9.717-9.717 25.472 0 35.19l204.736 204.736-160.344 0.001-0.588 0.007c-13.47 0.312-24.295 11.33-24.295 24.876 0 13.742 11.14 24.883 24.883 24.883h253.503V189.023l-0.006-0.587c-0.312-13.471-11.33-24.295-24.876-24.295l-0.588 0.006c-13.47 0.312-24.295 11.33-24.295 24.876l-0.002 176.203-212.938-212.938-0.468-0.455z"fill="#333333"></path></svg></span></div><script>// 定义一个窗口加载完毕后的回调函数。window.onload = () => {// 页面内容加载完成后执行// 获取网页中 ID 为 fullBtn 的元素。const fullBtn = document.getElementById("fullBtn");// 获取 fullBtn 元素中的类名为 fullScreen 的第一个子元素。const fullScreen = fullBtn.querySelector(".fullScreen");// 获取 fullBtn 元素中的 类名为 shrink的第一个子元素。const shrink = fullBtn.querySelector(".shrink");// fullBtn 元素添加了一个点击事件监听器。当 fullBtn 被点击时，会触发随后的回调函数fullBtn.addEventListener("click", () => {// 检测全屏状态:if (!document.fullscreenElement) {// 请求全屏:// requestFullscreen 是标准方法。document.documentElement.requestFullscreen?.() ||// mozRequestFullScreen 是针对 Firefox 浏览器的实现。document.documentElement.mozRequestFullScreen?.() ||// webkitRequestFullScreen 是针对旧版 Chrome 和 Safari 浏览器的实现。document.documentElement.webkitRequestFullScreen?.() ||// msRequestFullscreen 是针对 Internet Explorer 浏览器的实现。document.documentElement.msRequestFullscreen?.();// 退出全屏:} else {// exitFullscreen 是标准方法。document.exitFullscreen?.() ||// mozCancelFullScreen 是 Firefox 专有方法。document.mozCancelFullScreen?.() ||// webkitExitFullscreen 是旧版 Chrome 和 Safari 浏览器的实现。document.webkitExitFullscreen?.() ||// msExitFullscreen 是 IE/Edge 的实现。document.msExitFullscreen?.();}// 对 fullScreen 元素（全屏按钮）的类列表进行处理。// 如果 fullScreen 元素没有 shrink 类，则添加该类；// 如果 fullScreen 元素有 shrink 类，则移除该类。fullScreen.classList.toggle("shrink");// 对 shrink 元素（收缩按钮）的类列表进行处理。// 如果 shrink 元素没有 shrink 类，则添加该类；// 如果 shrink 元素有 shrink 类，则移除该类。shrink.classList.toggle("shrink");});};</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/35074.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据分析必备：一步步教你如何用matplotlib做数据可视化（12）

数据分析必备：一步步教你如何用matplotlib做数据可视化（12）

1、Matplotlib 3D线框图 线框图采用值网格并将其投影到指定的三维表面上&#xff0c;并且可以使得到的三维形式非常容易可视化。plot_wireframe()函数用于此目的 import matplotlib.pyplot as plt import numpy as np import math import seaborn as sns plt.rcParams[font.s…
阅读更多...
数据结构-----【链表:基础】

数据结构-----【链表:基础】

链表基础 1、链表的理论基础 1&#xff09;基础&#xff1a; 链表&#xff1a;通过指针串联在一起的线性结构&#xff0c;每个节点由两部分组成&#xff0c;一个是数据域&#xff0c;一个是指针域&#xff08;存放指向下一个节点的指针&#xff09;&#xff0c;最后一个指针…
阅读更多...
悬吊训练系统对于康复患者有什么好处

悬吊训练系统对于康复患者有什么好处

悬吊训练系统对于康复患者有多种好处&#xff0c;这些好处体现在身体功能的恢复、疼痛缓解以及生活质量提升等方面。以下是对这些好处的详细归纳&#xff1a; 提高感觉运动控制能力&#xff1a;悬吊训练通过让身体在不稳定的平面上进行运动&#xff0c;能够刺激感觉运动器官&am…
阅读更多...
在flask中加载mnist模型，并预测图片

在flask中加载mnist模型，并预测图片

一、在tensorflow中新建及保存模型 启动Jupyter Notebook 新建Notebook 生成 mnist_model.h5 模型的代码 import tensorflow as tf from tensorflow.keras.datasets import mnist from tensorflow.keras.models import Sequential from tensorflow.keras.layers import…
阅读更多...
dsp开发与arm开发有什么区别，应用差别

dsp开发与arm开发有什么区别，应用差别

一、DSP开发与ARM开发的区别 DSP&#xff08;Digital Signal Processor&#xff09;和ARM&#xff08;Advanced RISC Machine&#xff09;是两种不同类型的处理器&#xff0c;它们在设计理念、应用领域、指令集架构、性能特点等方面有所区别。 设计理念和应用领域 DSP&#…
阅读更多...
机器人控制系列教程之运动规划(2)

机器人控制系列教程之运动规划(2)

简介 在笛卡尔坐标空间中轨迹规划时&#xff0c;首先用位置矢量和旋转矩阵表示所有相应的机器人节点&#xff0c;其次在所有路径段插值计算相对的位置矢量和旋转矩阵&#xff0c;依次得出笛卡尔坐标空间中的轨迹序列通过求解运动学逆问题得到相应关节位置参数。 优点&#xf…
阅读更多...
linux安装pack格式的文件

linux安装pack格式的文件

在Linux中安装.pack格式的文件通常涉及使用pack工具&#xff0c;这是一个早期的压缩工具&#xff0c;现在已经不是主流的压缩格式了。如果你确实需要安装一个.pack文件&#xff0c;你可以按照以下步骤操作&#xff1a; 确保你的系统上安装了pack工具。如果没有安装&#xff0c…
阅读更多...
评测|贪吃小猫疯狂长肉,让它停不下嘴的希喂、鲜朗、帕特真实调研

评测|贪吃小猫疯狂长肉,让它停不下嘴的希喂、鲜朗、帕特真实调研

我发现很多铲屎官存在一个误区&#xff0c;认为“进口即是高贵”&#xff0c;过度信赖进口产品。一见到进口宠物粮就冲动购买&#xff0c;甚至对国产品牌持贬低态度&#xff0c;贴上“质量不佳”、“不符合标准”等标签。 为了更深入地了解这一现象&#xff0c;我深入研究了主食…
阅读更多...
探索1688.item_get接口：深入解析与技术实现

探索1688.item_get接口：深入解析与技术实现

在当前的电商领域&#xff0c;数据驱动已经成为了一种趋势。对于电商平台、数据分析应用以及与之相关的服务开发者来说&#xff0c;获取商品的详细信息是一项至关重要的任务。1688作为中国最大的B2B电商平台&#xff0c;提供了丰富的API接口&#xff0c;其中1688.item_get接口尤…
阅读更多...
kotlin——MVVM框架下的大型项目优化、以及activity和viewmodel臃肿的优化

kotlin——MVVM框架下的大型项目优化、以及activity和viewmodel臃肿的优化

目录 概要 优化思路 一、重构过长的Activity 二、优化臃肿的ViewModel 示例代码&#xff1a; 1.Activity封装到单独的Fragment中 2.把ViewModel拆分成多个子viewmodel 小结 概要 在大型项目中&#xff0c;随着项目越做越大&#xff0c;activity和viewmodel的代码会越来越多&am…
阅读更多...
【Unity小技巧】记一个RenderTexture无法正确输出Camera视图下的Depth渲染的问题

【Unity小技巧】记一个RenderTexture无法正确输出Camera视图下的Depth渲染的问题

问题 这个问题出现在使用URP管线时&#xff0c;我试图用Shader实现血条的制作&#xff0c;并用RenderTexture将视图渲染到RawImage上。 但是渲染结果出现了问题&#xff1a; 可以看到液体边缘的渲染出现了错误&#xff0c;原因不明 在StackFlow上查找后找到了类似的问题&…
阅读更多...
Spring Cloud - 开发环境搭建

Spring Cloud - 开发环境搭建

1、JDK环境安装 1、下载jdk17&#xff1a;下载地址&#xff0c;在下图中红色框部分进行下载 2、双击安装&#xff0c;基本都是下一步直到完成。 3、设置系统环境变量&#xff1a;参考 4、设置JAVA_HOME环境变量 5、在PATH中添加%JAVA_HOME%/bin 6、在命令行中执行&#xff1a;j…
阅读更多...
第三十篇——等价性：如何从等价信息里找答案？

第三十篇——等价性：如何从等价信息里找答案？

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 知道了等价性的逻辑&#xff0c;通过等价性去衡量事物&#xff0c;像是给…
阅读更多...
QPaintEngine

QPaintEngine

当使用 Qt 进行绘图操作时&#xff0c;QPaintEngine 的方法在底层起着重要作用。以下是一个更详细的示例&#xff0c;展示了如何在自定义的 QWidget 子类中使用 QPaintEngine 的方法进行绘图操作&#xff1a; #include <QWidget> #include <QPaintEvent> #include…
阅读更多...
1.1、Redis系列-Epoll 的高效工作流程

1.1、Redis系列-Epoll 的高效工作流程

epoll 的高效工作流程 epoll 是 Linux 操作系统提供的一种高效 I/O 多路复用机制。它的设计初衷就是为了高效地处理大量并发连接&#xff0c;解决 select 和 poll 的性能瓶颈问题。下面详细解释 epoll 的高效工作流程&#xff0c;并重点突出其高效性。 一、创建 epoll 实例 …
阅读更多...
Linux配置网卡详细教程

Linux配置网卡详细教程

这个网卡配置然后头痛了两天&#xff0c;看了很多篇关于这方面的文章&#xff0c;但是都没让我成功&#xff0c;可惜工亏不负有心人&#xff0c;然后终于学会了下面此方法 实现完成的效果&#xff1a; 永久修改网卡IP vi /etc/sysconfig/network-scripts/ifcfg-ens33 TYPEEther…
阅读更多...
node带参数命令

node带参数命令

不带参数命令示例&#xff1a; node /www/wwwroot/server 带参数命令示例&#xff1a; node /www/wwwroot/server arg1 arg2 arg3 在启动页进行参数处理&#xff1a; // 获取启动参数(除去前2个默认参数&#xff0c;示例&#xff1a;node /www/wwwroot/server arg1 arg2 …
阅读更多...
西门子840dsl机床仿真软件配置opcua说明

西门子840dsl机床仿真软件配置opcua说明

需要的安装包如下&#xff0c;可在百度网盘中下载 主软件包&#xff1a;sinutrain-v4.7-ed4&#xff08;也可在官网中下载最新版本&#xff09; 用户文件&#xff1a;UserDataBase 授权sinutrain&#xff1a;Sim_EKB_Install_2021_06_22 链接&#xff1a;https://pan.baidu.c…
阅读更多...
小阿轩yx-用户管理与高级SQL语句

小阿轩yx-用户管理与高级SQL语句

小阿轩yx-用户管理与高级SQL语句 MySQL 进阶查询 运维工作中可以提供不小的帮助&#xff0c;运维身兼数职&#xff0c;可能会有不少数据库的相关工作 常用查询介绍 对查询的结果集进行处理 按关键字排序 使用 SELECT 语句可以将需要的数据从 MySQL 数据库中查询出来 对结…
阅读更多...
1.0.计算机系统知识

1.0.计算机系统知识

考点分布&#xff1a;3 ~ 7分&#xff0c;历史平均5分&#xff0c;选择题 CPU 运算器和控制器的组件及它们的功能和特点。 数据的表示 定点数 原码、反码、补码、移码的计算 浮点数 阶码表示范围 尾数表示精度 校验码 奇偶校验、CRC循环冗余校验、海明校验。 其中 CRC循…
阅读更多...
最新文章

Copyright @ 2022~2023