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一样建表, ...
随机推荐
- Kubernetes DevOps CD工具对比选型
目录 Kubernetes DevOps CD工具对比选型 一.Flux 二.ArgoCD 三.Jenkins X 四.方案比较 Kubernetes DevOps CD工具对比选型 一.Flux 1 ...
- Codeforces Round #843 (Div. 2) C【思维】
https://codeforces.com/contest/1775/problem/C 题意 题意是说,给你n和x,你要求出最小的满足要求的m,使得 \(n\)&\((n+1)\)& ...
- py14模块简介
"""什么是模块 模块:就是一系列功能的结合体 模块的三种来源: 1.内置的(python解释器自带) 2.第三方的(别人写的) 3.自定义的(你自己写的) 模块的四种表 ...
- C#中socket的简单使用
一.Socket的概念Socket其实并不是一个协议,而是为了方便使用TCP或UDP而抽象出来的一层,是位于应用层和传输控制层之间的一组接口. 当两台主机通信是,必须通过Socket连接,Socket ...
- uniapp文件复制，重命名以及删除
查找某目录下的文件 plus.io.resolveLocalFileSystemURL( "_www/static/本地.png", funct ...
- c++游戏编程（1）开发环境与工具函数
c++游戏编程(1)开发环境与工具函数 文章目录 c++游戏编程(1)开发环境与工具函数 前言 1.开发工具 2.工具函数 2.1 windows.h 2.1.1 _mkdir() 2.1.2 _rm ...
- OJ19
1 // we have defined the necessary header files here for this problem. 2 // If additional header fil ...
- lineHeight 和fontSize的区别
参考资料:https://blog.csdn.net/WuLex/article/details/94667136 暂时记录,待测试确认. lineHeight包含了行间距,而fontSize只是字体 ...
- python中如何获取主机的ip和主机名
使用python中的socket库,可以轻松获取主机ip和主机名. 一.获取主机名 import socket hostname = socket.gethostname() print(hostna ...
- unity task
https://blog.csdn.net/weixin_43405845/article/details/105028291