html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更

全屏和退出全屏引用了layui里面的icon标签，也可以使用自己的图片，都可以。

html:

<div id="screenDiv"><!-- 以下是layui里图标的写法，可以换成自己的图片 --><i class="layui-icon layui-icon-screen-full" id="fullScreenIcon"></i><i class="layui-icon layui-icon-screen-restore" id="restoreScreenIcon"></i>
</div>

css:

#fullScreenIcon,#restoreScreenIcon{position: relative;width: 100%;height: 100%;color: #00e7ff;font-size: 2vw;cursor: pointer;
}
#restoreScreenIcon{display: none;
}

样式预览：

js:

/*** 全屏点击事件*/$("#fullScreenIcon").click(function () {let de = document.documentElement;if (de.requestFullscreen) {de.requestFullscreen().then();} else if (de.mozRequestFullScreen) {de.mozRequestFullScreen();} else if (de.webkitRequestFullScreen) {de.webkitRequestFullScreen();} else if (de.msRequestFullscreen) {de.msRequestFullscreen();}else {console.log("当前浏览器不支持全屏！");return false;}$(this).fadeOut(0);$(this).next().fadeIn(0);});/***退出全屏点击事件*/$("#restoreScreenIcon").click(function () {if(document.exitFullscreen) {document.exitFullscreen().then();} else if(document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if(document.webkitExitFullscreen) {document.webkitExitFullscreen();}$(this).fadeOut(0);$(this).prev().fadeIn(0);});/*** 监听全屏/退出全屏效果事件*/  document.addEventListener("fullscreenchange", function( event ) {if (document.fullscreenElement) {if ($("#fullScreenIcon").next().css("display") == "none"){$("#fullScreenIcon").fadeOut(0);$("#fullScreenIcon").next().fadeIn(0);}} else {if ($("#fullScreenIcon").css("display") == "none"){$("#fullScreenIcon").fadeIn(0);$("#fullScreenIcon").next().fadeOut(0);}}});

加上全屏变更监听事件，就可以监听到Esc退出全屏事件，可以变更全屏按钮的样式。

html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更相关推荐

监听ESC退出全屏事件
全屏时,监听不到ESC退出全屏事件时可以试试这个方法: // 绑定监听事件 fullListen() {let screen = document.getElementById("scree ...
android自定义adapter(实现对按钮的监听)
我们一般需要自定义adapter 这里就需要继承BaseAdapter adapter在MVC开发模式中,是控制层 baseAdapter 继承这个方法必须重写四个方法 1. getcont ...
JComboBox 的下拉按钮添加监听
JComboBox 的下拉按钮添加监听 1.问题描述 2.需求分析 3.代码示例 4.结果演示系统:Win10 JDK:1.8.0_333 IDEA:2020.3.4 1.问题描述在使用一个 JC ...
Flutter 返回按钮的监听
物理按钮和返回按钮的监听 Flutter 返回按钮的监听是通过 WillPopScope来实现的 class BackDemoState extends State<BackDemoWidget ...
java按钮点击事件监听_按钮事件监听
[java]代码库/** * 功能:按钮事件监听 */ package com.test; import java.awt.*; import javax.swing.*; import java.a ...
React 全屏监听Esc键
全屏与退出全屏 if (isFull) {document.exitFullscreen();} else {tree.current.requestFullscreen();tree.current ...
【iOS-Cocos2d游戏开发之五】【1】多触点与触屏事件详解（单一监听、事件分发）...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html ...
android横竖屏切换布局闪退,Android-Activity横竖屏切换不杀死Activity 并监听横竖屏切换...
在上一篇博客,Android-Activity临时数据的保存,中讲解到,当发生横竖屏切换的时候,系统会杀死Activity并重新启动Activity 系统会杀死Activity 12-12 08:11 ...
【iOS-Cocos2d游戏开发之五】多触点与触屏事件详解（单一监听、事件分发）
李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/iphone-cocos2d/450.html------- ...

html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更

html全屏/退出全屏按钮，以及监听Esc退出后按钮样式变更相关推荐

最新文章

热门文章