JS+layui实现浏览器全屏与还原

最新推荐文章于 2023-04-03 20:19:18 发布
最新推荐文章于 2023-04-03 20:19:18 发布
阅读量477 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43630915/article/details/115506335
版权

html代码

//引用layui全屏图标。
<p onclick="handleFullScreen()">
	<i id='icon' class="layui-icon layui-icon-screen-full" style="font-size:50px;"></i>  
</p>

JS代码

// 全屏事件
function handleFullScreen() {
   
	let element = document.documentElement;
	if
最低0.47元/天 解锁文章
码农阿胖
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS或jQuery实现全屏
BaymaxLily的博客
12-30 2647
JS或jQuery实现全屏
js点击图片放大恢复功能
Jokerfsc的博客
02-28 790
开发过程中，有点击图片需要展示图片的需求。因为之前全部是后台开发，没有接触过页面的设计。 为此专门记录一下。 首先是获取图片，为图片添加点击事件。获取图片的原始参数，然后根据各个参数设置放大的图片参数。然后再次点击，关闭展示层。根据窗口的高度和宽度，减去对应的放大后图片的高度和宽度，然后除以2，计算图片居中显示位置。最后设置展示层的背景为黑色半透明。使之图片显示的更为清晰。 点击图片，放大缩小。原...
fullScreen.js:让网页自动全屏显示
04-27
＃fullScreen.js 轻巧且无依赖的js库使网页自动全屏显示 ＃用法 < script src =" /path/to/fullScreen.js " > </ script > < script > // example 1: // // '#body1' min height(px) = // [browser inner height] - [`#header` height] - [`#footer` height] // full ( '#body1' ) . fixed ( '#header' ) . fixed ( '#footer' ) . render ( ) ; // example 2: // //
js控制网页窗口一打开就自动全屏
wangjubi的舞台
03-10 2万+
<br /> <br /> <br />1、如果不需要开新窗口 <br />在body区加入： <body   onLoad= "javascript:window.resizeTo(screen.availWidth,screen.availHeight);window.moveTo(0,0) "> <br /> <br /> <br />2、如果需要打开新窗口 <br />在链接处加入： <a   href= "javascript:window.open( 'xxx.htm ', ' ', 'widt
js 实现各浏览器全屏
前端小狮的博客
02-01 3万+
现代浏览器包括ie11，可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现； //直接上代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &
vue中全屏screenfull.js的使用 （默认全屏显示 使用 .request() ）
qq_37672347的博客
11-19 6117
请记住，浏览器仅在由用户事件（如单击，触摸，按键）启动时才进入全屏显示。
jq+layui 实现图片拖拽上传功能
02-28
在IT行业中，实现图片拖拽上传功能是一种提升用户体验的有效方式，尤其在网页...以上就是jq+layui实现图片拖拽上传功能的详细步骤和关键知识点，希望对你有所帮助。在实际项目中，你可以根据需求进行相应的扩展和优化。
Android开发实现浏览器全屏显示功能
08-29
Android开发实现浏览器全屏显示功能 Android开发实现浏览器全屏显示功能是指在Android应用程序中，实现浏览器的全屏显示功能，也就是说，在浏览器中隐藏标题栏和状态栏，只显示浏览器的内容。这种功能常见于移动端...
js实现浏览器全屏兼容谷歌火狐等
06-18
"js实现浏览器全屏兼容谷歌火狐等"这个主题就涉及到如何使用JavaScript来实现在不同浏览器上实现全屏功能，并确保与主流浏览器如Google Chrome和Mozilla Firefox等的兼容性。这里我们将详细讲解这一技术实现的原理和...
vue实现浏览器全屏展示功能
10-15
在Vue.js项目中，实现浏览器全屏展示功能是一项常见的需求，特别是在创建沉浸式用户体验或进行全屏演示时。在本示例中，开发者使用了`sreenfull`这个第三方插件来简化这一过程。以下是关于如何使用`sreenfull`插件在...
jquery 全屏显示插件
03-20
jquery 全屏显示插件，实现网页的全屏显示。适用各种不同的浏览器，包括FF 10, Chrome 和 Safari。它用于为用户提供了一个更容易阅读的网页版本，可缩放和元素。
利用浏览器全屏api实现js全屏
10-26
主要介绍了利用浏览器全屏api实现js全屏的代码示例,示例中使用了jquery，把这个库的地址改成自己的，大家参考使用吧
使用js实现任意元素均可全屏显示的插件，提供vue自定义指令，开箱即用
sssdal19995的博客
04-03 931
给界面上任意元素提供全屏能力的组件; 1.支持多层级逐级打开全屏和取消全屏。 2.提供完善的生命周期监听函数。 3.默认提供vue自定义指令，开箱即用
js设置html全屏,JS实现全屏的四种写法
weixin_39640687的博客
06-22 454
',{'css': {'overflow-y': 'auto','background': options.background,'width': '100%','height': '100%','align': 'center'}});var elem = this;// You can use the .fullScreen class to// apply styling to your e...
js页面全屏显示功能
li22356的博客
03-20 521
js页面全屏展示
layui弹窗自适应变大_解决layer弹出层自适应页面大小的问题
weixin_39639096的博客
12-18 1863
前两天在Vue中引入了Vue-layer插件，实现了弹出层效果。不过由于是在22寸屏下开发的，没多想，弹出层的area的长宽就设定的都是800px，效果还很好。结果那给用户看，他们是12寸的笔记本。弹出层直接撑爆了页面，无法关闭。。。网上的解决方案大都是以下几种：1、改成百分比形式。有bug，下面细说。2、改成em，rem等。同上3、采用area：auto。可能是因为采用了swiper的原因吧，这...
layui实现全屏弹出层。
kaka2Ting的博客
08-08 1万+
实现的源码： js函数： addtype: function () { var that = this; that._data.operatetype = 0; that._data.saveobj.floorId = []; that._data.layerindex.index_2 = layer.open({ type: 1, ...
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layer系列之-弹出层全屏及关闭
weinichendian的博客
10-09 5万+
一、首先引用JS文件 <script src="../../js/common/layer/layer.js"></script> 二、全屏调用以下代码 var index = layer.open({ type: 2, content: url, ...
js 浏览器全屏与取消全屏方阿飞
最新发布
04-26
您好，关于您的问题，您可以使用以下代码： 全屏： ```javascript var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; if(typeof rfs != "undefined" && rfs) { rfs.call(el); } else if(typeof window.ActiveXObject != "undefined") { // for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if(wscript != null) { wscript.SendKeys("{F11}"); } } ``` 取消全屏： ```javascript var el = document; var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen; if(typeof cfs != "undefined" && cfs) { cfs.call(el); } else if(typeof window.ActiveXObject != "undefined") { // for Internet Explorer var wscript = new ActiveXObject("WScript.Shell"); if(wscript != null) { wscript.SendKeys("{F11}"); } } ``` 这里使用了元素的 requestFullScreen() 和 cancelFullScreen() 方法来进行全屏与取消全屏的操作。如果浏览器不支持这些方法，可以使用 ActiveXObject 对象来模拟 F11 键盘事件实现全屏与取消全屏的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值