HTML页面全屏/退出全屏
2024-10-13 09:39:16
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>页面全屏/退出全屏</title>
</head> <body>
<a class="screen-full" id="full" href="javascript:;">全屏</a>
</body> </html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$('#full').click(function() {
var ele = document.documentElement;
var SCREEN_FULL_TEXT = "全屏";
var SCREEN_REST_TEXT = "退出全屏";
var SCREEN_FULL = 'screen-full';
var SCREEN_REST = 'screen-restore';
var iconElem = $(this);
if (iconElem.hasClass(SCREEN_FULL)) {
var reqFullScreen = ele.requestFullScreen || ele.webkitRequestFullScreen || ele.mozRequestFullScreen || ele.msRequestFullscreen;
if (typeof reqFullScreen !== 'undefined' && reqFullScreen) {
reqFullScreen.call(ele);
};
iconElem.addClass(SCREEN_REST).removeClass(SCREEN_FULL);
iconElem.text(SCREEN_REST_TEXT);
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
iconElem.addClass(SCREEN_FULL).removeClass(SCREEN_REST);
iconElem.text(SCREEN_FULL_TEXT);
}
});
</script>
最新文章
- sql查询慢优化
- vtkTubeFilter实例
- RobotFramework - 在Window7系统中安装本地RobotFrmamework自动化测试环境
- Linux简介及常用命令使用1--linux环境搭建
- 安装vim的ycm
- paip.提升性能---jvm java 工具使用.
- 【cs229-Lecture20】策略搜索
- android 代码控制控件的长宽,小技巧
- mac os 显示文件列表命令 ls -a
- Poj(2253),Dijkstra松弛条件的变形
- Tomcat内存设置详解
- Newtonsoft.Json.dll解析json的dll文件使用
- gridview列显示,截取其中前面的几个字显示出来,当鼠标放上去的时候显示全部——使用LinkButton的方法
- 必须得是一万小时的 刻意训练(deliberate practice)
- 定制化Azure站点Java运行环境(2)
- 优酷m3u8视频源地址获取失败
- .NET 4 并行(多核)编程系列之二 从Task开始
- 白话解释IIS并发连接数
- Qt中隐藏滚动条重新实现鼠标滚轮事件wheelEvent
- python之count()函数
热门文章
- [二] java8 函数式接口详解 函数接口详解 lambda表达式 匿名函数 方法引用使用含义 函数式接口实例 如何定义函数式接口
- Spring Boot 系列总目录
- GAN模型生成手写字
- angularjs1.X进阶笔记(3)——如何重构controller
- 第36章 扩展授权 - Identity Server 4 中文文档(v1.0.0)
- Dapper批量操作实体
- 【学习笔记】tensorflow文件读取
- nodejs cookie与session
- 2-SAT速成
- cesium 之自定义气泡窗口 infoWindow 后续优化篇(附源码下载)