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一样建表, ...
随机推荐
- golang yaml配置
Redis配置文件结构体 package config type Redis struct { Host string `yaml:"host"` Password string ...
- java使用MVC编程模型实现1+到100图形界面
MVC概念 MVC编程模型是可以说从提出到现在经久不败,是一种先进的设计结构.能很好的体现个人分工,从而实现前后端分离. M(Model):模型:存储数据的对象.后端操作数据库的. V(View):视 ...
- Json数组形式的字符串转为Map数组、Map集合的几种遍历方式
// Json数组形式的字符串转为Map数组 String strArr = "[{"name": "xx", "age": &q ...
- laravel request lifecycle
1, index.php2, 生成service container3, service provider register/booted4, dispatch routing5, middlew ...
- UML各种图实践题
1. 用状态图描述一部电梯的运行
- JMeter 三- Run JMeter in non-GUI mode
Run Jmeter in non-GUI mode: 1. Swith to \Jmeter\bin 2. run "jmeter -n -t E:\JmeterforLoadGenesi ...
- TODO留学小程序，展开，收起失效
text设置user-select=true后,display: -webkit-box 失效? https://developers.weixin.qq.com/community/develop/ ...
- Linux工作中最常用命令整理
ls 命令:显示指定工作目录下之内容 ls -a # 显示所有文件夹,包含隐藏的. 和.. ls -l # 显示文件的详细信息,包含文件形态,权限,所属,大小,其实就是平常用的 ll ll -h # ...
- 2020ICPC沈阳I - Rise of Shadows
剩余系 Problem - I - Codeforces 题意 给定 \(H,M,A\) \(2<=H,M<=10^9,\;0<=A<=\frac {H*M}2\) 假设一个钟 ...
- CF850F 题解
题意 传送门 有一袋 \(n\) 个颜色球,第 \(i\) 个颜色的球有 \(a_i\) 个. 当袋子里至少有两个不同颜色的球时,执行以下步骤: 一个接一个的按照顺序随机取出两个的球,这些球的颜色可能 ...