// 点击进入全屏 方法、
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. Boostrap零散

    12 row 是核心控件 class="form-control" 弹窗口<input data-toggle="modal" data-target=& ...

  2. UVa 11025 The broken pedometer【枚举子集】

    题意:给出一个矩阵,这个矩阵由n个数的二进制表示,p表示用p位二进制来表示的一个数 问最少用多少列就能将这n个数区分开 枚举子集,然后统计每一种子集用了多少列,维护一个最小值 b[i]==1代表的是选 ...

  3. dijkstra STL 堆优化

    Code: #include<iostream> #include<algorithm> #include<vector> #include<queue> ...

  4. POJ2104 K-th Number(整体二分)

    题解 又一次做这个题上一次用的是线段树上二分.这次用的是整体二分.结果: (第一个是整体二分) 整体二分就是对于所有查询都二分一个值.然后根据能不能成立把询问修改分成两部分,然后第二部分继承第一部分的 ...

  5. php如何openssl_encrypt加密解密

    最近在对接客户的CRM系统,获取令牌时,要用DES方式加密解密,由于之前没有搞错这种加密方式,经过请教了"百度"和"谷歌"两个老师后,结合了多篇文档内容后,终于 ...

  6. bzoj 2120 数颜色 题解

    转载请注明:http://blog.csdn.net/jiangshibiao/article/details/23990489 [原题] 2120: 数颜色 Time Limit: 6 Sec  M ...

  7. 【v2.x OGE教程 17】事务处理

    游戏代码中常常有些逻辑须要处理.因此OGE引擎加入了一个IUpdateHandler的类. IUpdateHandler类是OGE引擎中使用频率很之高的组件之中的一个,其本身是一个接口.内部有onUp ...

  8. 关于HttpClient模拟浏览器请求的參数乱码问题解决方式

    转载请注明出处:http://blog.csdn.net/xiaojimanman/article/details/44407297 http://www.llwjy.com/blogdetail/9 ...

  9. Sqlite 命令行导出、导入数据(直接支持CSV)

    打开命令行 导出数据到data.csv D:\project>sqlite3.exe old.db SQLite version 3.21.0 2017-10-24 18:55:49 Enter ...

  10. JsonRequestBehavior.AllowGet 方便浏览器调试

    [HttpGet] public ActionResult getCoversationList(int CustomerId) { // 获取用户相关的聊天数据,包括个人,群,系统(可以单独获取) ...