// 点击进入全屏 方法、
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 ---- 实现浏览器全屏的更多相关文章

  1. JavaScript:让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  2. 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  3. 兼容IE浏览器的js浏览器全屏代码

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...

  4. [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...

  5. 浏览器全屏之requestFullScreen全屏与F11全屏

    一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...

  6. js 实现各浏览器全屏

    现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...

  7. Egret--设置全屏,控制浏览器全屏

    1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...

  8. html5 js实现浏览器全屏

    全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...

  9. HTML5 JS 实现浏览器全屏(F11的效果)

    项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...

随机推荐

  1. 在Ubuntu下使用命令删除目录

    在Ubuntu命令行中用命令删除目录,现在在Linux系统中删除目录大致会用两个,rm和rmdir,rm命令删除目录很简单,不过很多人还是比较习惯用rmdir命令,如果操作的目录非空时就有点麻烦.这时 ...

  2. SCO Openserver、SCO Unix、SCO UnixWare、Solaris几者到底是什么关系,有什么相同或不同?

    Unix操作系统的历史漫长而曲折,它的第一个版本是1969年由Ken Thompson在AT&T贝尔实验室实现的,运行在一台DEC PDP-7计算机上.这个系统非常粗糙,与现代Unix相差很远 ...

  3. POJ-2142 The Balance 扩展欧几里德(+绝对值和最小化)

    题目链接:https://cn.vjudge.net/problem/POJ-2142 题意 自己看题吧,懒得解释 思路 第一部分就是扩展欧几里德 接下来是根据 $ x=x_0+kb', y=y_0- ...

  4. caioj 1067动态规划入门(一维一边推5: 乘积最大(高精度版))

    因为这里涉及到乘号的个数,那么我们可以用f[i][j]表示前i个位乘号为j个时的最大乘积 那么相比上一题就是多了一层枚举多少个乘号的循环,可以得出 f[i][r] = max(f[j - 1][r - ...

  5. Object-C,NumberDemo和StringDemo

    晚上抽空写了2个Demo.第1个是演示字符串,第2个是演示数组和可变数组.只用到了几个基本的方法和基本语句. NSString字符串对象,NSNumber和NSMutableNumber,if语句,N ...

  6. Spring Cloud学习笔记【十】配置中心(消息驱动刷新配置)

    上一篇中讲到,如果需要客户端获取到最新的配置信息需要执行refresh,我们可以利用 Webhook 的机制每次提交代码发送请求来刷新客户端,当客户端越来越多的时候,需要每个客户端都执行一遍,这种方案 ...

  7. python list的+,+=,append,extend

    面试题之中的一个. def func1(p): p = p + [1] def func2(p): p += [1] p1 = [1,2,3] p2 = [1,2,3] func1(p1) func2 ...

  8. js实现小时钟,js中Date对象的使用?

    介绍一下js中Date对象的使用 dateObj = new Date() dateObj = new Date(dateValue) dateObj = new Date(year,month,da ...

  9. vue15 自定义元素指令、标签指令

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Gym - 100625E Encoded Coordinates 矩阵快速幂

    题意: 一直TLE我也是醉了,,不爽! #include <iostream> #include <cstdio> #include <fstream> #incl ...