jq ---- 实现浏览器全屏
// 点击进入全屏 方法、
var fullscreen=function(){
elem=document.body;
if(elem.webkitRequestFullScreen){
elem.webkitRequestFullScreen();
}else if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}else if(elem.requestFullScreen){
elem.requestFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
}
}
// 点击退出全屏 方法
var exitFullscreen=function(){
var elem=document;
if(elem.webkitCancelFullScreen){
elem.webkitCancelFullScreen();
}else if(elem.mozCancelFullScreen){
elem.mozCancelFullScreen();
}else if(elem.cancelFullScreen){
elem.cancelFullScreen();
}else if(elem.exitFullscreen){
elem.exitFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
}
}
需要注意的是:需要通过 事件触发 当前的函数。
出现的bug:所有的元素会居中,不在html 的左上角。
解决的方法:给html 设置一个相对定位,给body 一个决定定位。
jq ---- 实现浏览器全屏的更多相关文章
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 兼容IE浏览器的js浏览器全屏代码
众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...
- [JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- 浏览器全屏之requestFullScreen全屏与F11全屏
一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...
- js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...
- Egret--设置全屏,控制浏览器全屏
1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...
- html5 js实现浏览器全屏
全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...
- HTML5 JS 实现浏览器全屏(F11的效果)
项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...
随机推荐
- T_SQL 字符串函数
字符串函数用于处理列中的数据值,通常属于字符型的数据类型. 1.ASCLL(character),将具体字符转换为相应的整数(ASCII)代码,结果为正数. 例:select ASCII('A'), ...
- SSD-tensorflow-1 demo
一.简易识别 用最简单的已训练好的模型对20类目标做检测. 你电脑的tensorflow + CUDA + CUDNN环境都是OK的, 同时python需要安装cv2库 { 'aeropla ...
- vue中使用console.log无效
webpack开发环境下,在vue中使用console.log无效,一直以为webpack出了问题. 使用window.console.log()就能够顺利在浏览器控制台输出了. 以及 在axios请 ...
- JDK工具(零)--简要介绍JDK1.6自带的42个工具
Java的开发人员肯定都知道JDK的bin目录中有"java.exe"和"javac.exe"这两个命令行工具, 但并非所有的Java程序员都了解过JDK的bi ...
- 05-数据类型转换(bool转换)
05-数据类型转换(bool转换)
- LocalDateTime在spring boot中的格式化配置
在项目中日期格式化是最常见的问题,之前涉及的 java.util.Date 和 java.util.Calendar 类易用性差,不支持时区,非线程安全,对日期的计算方式繁琐,而且容易出错,因为月份是 ...
- Spring-boot非Mock测试MVC,调试启动tomcat容器
平常我们在使用spring-boot去debug一个web应用时,通常会使用MockMvc. 如下配置: @RunWith(value = SpringRunner.class) @SpringBoo ...
- 【JavaScript】JavaScript中的replaceAll
JavaScript中是没有replaceAll的.仅仅有replace,replace仅仅能替换字符中的第一个字符.并且这个replace里面不支持正則表達式,以达到replaceAll的目的. 只 ...
- PHP 做图片锐化处理
<?php //读取图像的类型 //1=GIF,2=JPG,3=PNG,4=SWF,5=PSD,6=BMP,7=TIFF(intelbyteorder),8=TIFF(motorolabyteo ...
- 赵雅智_运用Bitmap和Canvas实现图片显示,缩小,旋转,水印
上一篇已经介绍了Android种Bitmap和Canvas的使用,以下我们来写一个详细实例 http://blog.csdn.net/zhaoyazhi2129/article/details/321 ...