js 实现全屏预览（F11功能）--转
参考文档 http://t.zoukankan.com/ghfjj-p-6322415.html
HTML代码
<body>
<div id="content">
<div>内容1</div>
<div>内容2</div>
<img id="btn" src="img/icon/btn_fd.png"
style="float:left;width:18px;height:18px"
onclick="big()" />
</div>
</body>
JS事件
<script type="text/javascript">
var clickBigNumber = 1;//定义放大缩小点击次数
</script>
function big() {
//由于只有一个按钮可操作，所以定义了clickBigNumber,
//第一次点击，clickBigNumber==1，所以为全屏，再一次点击clickBigNumber==2且%2==0，所以退出全屏
var content = document.getElementById('content');
if (clickBigNumber % 2 == 0) {
//退出全屏
exitFullScreen(content);
} else {
//全屏
fullScreen(content);
}
clickBigNumber++;
}
JS实现方法
//全屏
function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFullScreen(el) {
var el = document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
js 实现全屏预览（F11功能）--转的更多相关文章
- JS 实现全屏预览 F11功能
老是不通过,没办法,只能是重新发布了,反正我就是杠上了,大大小小写过很多前端特效,当然也经常在网上copy或者修改人家的代码,我觉得也挺好的,为什么?!因为我想这样,你能怎么办,打我?少废话,直接上代 ...
- IOS 图片全屏预览
如果你感觉累,那就对了那是因为你在走上坡路..这句话似乎有点道理的样子,时常提醒自己无论走到哪都不要忘记自己当初为什么出发.有时想想感觉有的东西可以记录一下,就把它记录下来吧,这次想写一下关于单张图片 ...
- IOS中实现图片点击全屏预览
//// ViewController.m// XWZoomImageView//// Created by xiao on 15/11/13.// Copyright © 2015年 xiao. A ...
- 图片无损放大软件PhotoZoom分屏预览功能 ，简直好用！
PhotoZoom是一款智能放大图片软件,很多用户在初次使用PhotoZoom,发现图片所处的区域上方有四个不同方式的预览选项.因为很多初学者使用时不明白这四个按钮有什么作用,所以小编接下来讲解一下P ...
- JS实现上传图片的三种方法并实现预览图片功能
地址:http://www.jb51.net/article/118660.htm js HTML5拖拽图片预览 地址:http://www.jb51.net/article/88803.htm js ...
- JS实现的图片预览功能
之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...
- input file样式修改，图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- Android 10开发者预览版功能介绍
Android P的开发者预览版最亮眼的功能莫过于支持“刘海屏”等屏幕显示.同样在适配可折叠设备方面,Android Q的第一个开发者预览版也很“接地气”,谷歌早在去年11月就发布了对可折叠设备的支持 ...
- js控制全屏及退出全屏
js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...
- 本地存储数据库indexedDB实现离线预览的功能
今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...
随机推荐
- Qt 程序主界面添加背景图片
1.开发环境:Qt5.12.2,QtCreate4.8.2 2.贴图代码,在主程序中编写 #include <QImageReader> int main(int argc, char * ...
- DAC双通道模板
#define DAC_C #include "dac.h" float DAC_DispenseA; float DAC_DispenseB; void MyDAC_Init(v ...
- AIX查看目录大小
cd $ORACLE_HOME cd .. du -sg * 16.35 dbhome_1
- GoogleAdMob
写在最开始==================>一定要确定好中介和GoogleAdMob的版本对应关系 由于GoogleAdMob对接的官方文档是叫你去下载旧版的SDK,然后就很容易就弄混了版本 ...
- Webrtc audio
整体理解 在 WebRTC 中,Call 是peer connection 的. 为 WebRTC Call 注入的 AudioState 来自于全局的 MediaEngine 的 VoiceEngi ...
- pip更改为国内源
1. 查看现有默认pip安装源 pip config list 2. 按次修改 添加指定源 pip install numpy -i https://pypi.tuna.tsinghua.edu.cn ...
- TODO留学小程序，展开，收起失效
text设置user-select=true后,display: -webkit-box 失效? https://developers.weixin.qq.com/community/develop/ ...
- 国际版Office365客户端配置
Email Provider IMAP Settings POP Settings SMTP Settings Microsoft 365 Outlook Hotmail Live.com Serve ...
- Eclipse创建maven-web项目时找不到archetype解决方法
转:https://blog.csdn.net/sunjinjuan/article/details/82943488
- fatal error: openssl/ssl.h: No such file or director
$ sudo apt-get install libssl-dev