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

第一次修改

<!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;最后一个指针…
阅读更多...
在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…
阅读更多...
机器人控制系列教程之运动规划(2)

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

简介 在笛卡尔坐标空间中轨迹规划时&#xff0c;首先用位置矢量和旋转矩阵表示所有相应的机器人节点&#xff0c;其次在所有路径段插值计算相对的位置矢量和旋转矩阵&#xff0c;依次得出笛卡尔坐标空间中的轨迹序列通过求解运动学逆问题得到相应关节位置参数。 优点&#xf…
阅读更多...
评测|贪吃小猫疯狂长肉,让它停不下嘴的希喂、鲜朗、帕特真实调研

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

我发现很多铲屎官存在一个误区&#xff0c;认为“进口即是高贵”&#xff0c;过度信赖进口产品。一见到进口宠物粮就冲动购买&#xff0c;甚至对国产品牌持贬低态度&#xff0c;贴上“质量不佳”、“不符合标准”等标签。 为了更深入地了解这一现象&#xff0c;我深入研究了主食…
阅读更多...
【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;像是给…
阅读更多...
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 数据库中查询出来 对结…
阅读更多...
第一百二十六节 Java面向对象设计 - Java枚举类

第一百二十六节 Java面向对象设计 - Java枚举类

Java面向对象设计 - Java枚举类 枚举类型的超类 编译枚举类型时&#xff0c;编译器会创建一个类。 枚举类型可以具有构造函数&#xff0c;字段和方法。枚举类型仅在编译器生成的代码中实例化。 每个枚举类型都隐式地扩展java.lang.Enum类。 Enum类中定义的所有方法都可以与…
阅读更多...
从一到无穷大 #29 ByteGraph的计算，内存，存储三级分离方案是否可以通用化为多模数据库

从一到无穷大 #29 ByteGraph的计算，内存，存储三级分离方案是否可以通用化为多模数据库

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言ByteGraph现有架构阿里云Lindorm腾讯YottaDB多模型化修改点ByteGraph论文中的优化…
阅读更多...
PD虚拟机支持M3吗 PD虚拟机怎样配置图形卡

PD虚拟机支持M3吗 PD虚拟机怎样配置图形卡

最近有很多人在问M3芯片的苹果电脑和M2相比&#xff0c;有哪些提升的功能。实际上&#xff0c;M3芯片的苹果电脑拥有与M2相同的CPU与GPU数量&#xff0c;但比M2多50亿个晶体管&#xff0c;并引入了动态缓存、增强型神经网络引擎等技术&#xff0c;性能、功能均进一步加强。面对…
阅读更多...
Ubuntu22 更新内核后终端输入卡顿，最简单的解决方案

Ubuntu22 更新内核后终端输入卡顿，最简单的解决方案

在系统升级后相信很多人都遇到了这个问题&#xff0c;系统终端输入卡顿&#xff0c;但是ssh远程进来不卡&#xff0c;使用第三方终端也不卡,…&#xff0c;今天终于忍不了&#xff0c;解决了 现象&#xff1a; 更新Nvidia驱动后,内核进行了自动编译升级。 之后的一段时间使用…
阅读更多...
从零开始做题：修猫

从零开始做题：修猫

修猫 1 题目 2 解题 2.1 使用Stegslove分析图片 (base) ┌──(holyeyes㉿kali2023)-[~/Misc/tool-misc] └─$ java -jar Stegsolve.jar 2.2 analyse -frame browser 2.3 得到flag DASCTF{818ca3a840e768da7d5fcdeaedd5012f}
阅读更多...
ROS2中的CMakeLists（一）——基础知识

ROS2中的CMakeLists（一）——基础知识

在使用ROS2框架开发机器人应用时&#xff0c;对各个功能包Cmakelist.txt文件的更改尤为重要。本系列旨在总头开始介绍Cmakelist.txt各条语句的意义和内涵。 Cmake已经是高度集成的构建工具&#xff0c;其作用是在不同开发环境下生成makefile文件&#xff0c;以此来执行make指令…
阅读更多...
【分布式文件系统HDFS】API 编程基础

【分布式文件系统HDFS】API 编程基础

目录 一、使用 HDFS API 完成以下程序设计并运行 1. 将 HDFS 文件系统目录/user/账户名下的文件 test1.txt 下载至本地文件系统目录/home/账户名/Desktop 下。 1.1 程序代码 1.2 运行截图 1.3 查看本地的test1.txt文件 2. 在 HDFS 文件系统上创建目录/test1 2.1 程序代码…
阅读更多...
【PyQt5】一文向您详细介绍 setSpacing() 的作用

【PyQt5】一文向您详细介绍 setSpacing() 的作用

【PyQt5】一文向您详细介绍 setSpacing() 的作用 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023