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一样建表, ...
随机推荐
- linux网卡配置模板(Rocky)
动态获取: tips: sudo nmcli con: 查询网卡UUID TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=dhcp ...
- Java调用Kettle
Java 调用 kettle,难的不是怎么调用,而是解决 maven 依赖冲突问题,直接将 kettle 依赖,添加到我们的 maven 工程,可能会导致代码大范围报错:解决方案也很简单,就是直接从 ...
- 【Ubuntu】设置桌面文件夹路径
Ubuntu 系统会将桌面文件夹路径默认设置为 $HOME/Desktop,包括文档.下载.图片等文件夹路径都有各自的默认路径.若想更改这些文件夹路径,可参考『此链接』. 首先到希望更改的路径下建立桌 ...
- 怎么把百度地图的搜索结果全部导出到Excel文件
有很多人问我,怎么样能够快速的把BAIDU地图左边的搜索列表里的商家地图,电话,导出到EXCEL里. 我就开发了一个小软件,专门为快速的实现导出数据到EXCEL. 为了使用方便,已经将全国的所又省份, ...
- Unity3d 动画转换中断
翻译自https://blogs.unity3d.com/2016/07/13/wait-ive-changed-my-mind-state-machine-transition-interrupti ...
- MySQL之中文数据问题
随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...
- zabbix housekeeper 太大 清理
217G housekeeper.ibd rename table housekeeper to housekeeper_bak_20220801;Query OK, 0 rows affected ...
- C++实现链式表示多项式加法运算
#include<iostream>#include<cstdlib>using namespace std;#define MAXSIZE 100#define OK 1#d ...
- 面试视频知识点整理1-13（mvvm框架）
1.了解mvvm框架吗? Vue.js React Angular 2.谈谈你对mvvm的认识 由mvc和mvp演变而来 3.双向绑定是什么原理? object.defineProperty的用法要熟 ...
- Dapper.FastCRUD与Dapper中的CustomPropertyTypeMap冲突
在使用Dapper.NET时,由于生成的实体的属性与数据库表字段不同(如表字段叫USER_NAME,生成的对应的实体属性则为UserName). 这时需要使用Dapper中的CustomPropert ...