JS实现全屏的四种写法


Posted in Javascript onDecember 30, 2016

JS或jQuery实现全屏

JS写法一

.html

<div class="container"
   <button id="full-screen">全屏</button>
   <button id="exit-fullscreen">退出</button>
</div>

.css

/* Basic element styles */
  html {
    color: #000;
    background: paleturquoise;
    min-height: 100%;
   }
  /* Structure */
  .container {
   text-align: center;
   width: 500px;
   min-height: 600px;
   background: #fff;
   border: 1px solid #ccc;
   border-top: none;
   margin: 20px auto;
   padding: 20px;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 1px 1px 10px #000;
   -moz-box-shadow: 1px 1px 10px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
  }
  button{
   margin: 200px auto;
   width: 100px;
   height: 30px;
   background-color: aliceblue;
  }

  /* Fullscreen */
  html:-moz-full-screen {
   background: blue;
  }

  html:-webkit-full-screen {
   background: blue;
  }

  html:-ms-fullscreen {
   background: blue;
   width: 100%; /* needed to center contents in IE */
  }

  html:fullscreen {
   background: blue;
  }

.js

(function () {
  var viewFullScreen = document.getElementById("full-screen");
  if (viewFullScreen) {
   viewFullScreen.addEventListener("click", function () {
    var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
     docElm.requestFullscreen();
    }
    else if (docElm.msRequestFullscreen) {
     docElm.msRequestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
     docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
     docElm.webkitRequestFullScreen();
    }
   }, false);
  }

  var cancelFullScreen = document.getElementById("exit-fullscreen");
  if (cancelFullScreen) {
   cancelFullScreen.addEventListener("click", function () {
    if (document.exitFullscreen) {
     document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
     document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
     document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
     document.webkitCancelFullScreen();
    }
   }, false);
  }


  var fullscreenState = document.getElementById("fullscreen-state");
  if (fullscreenState) {
   document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreenElement)? "" : "not ";
   }, false);

   document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
   }, false);

   document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
   }, false);

   document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
   }, false);
  }

 })();

JS写法二

.html

<div style="margin:0 auto;height:600px;width:700px;">
 <button id="btn">全屏</button>
 <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
  <h1>全屏展示和退出全屏</h1>
 </div>
</div>

.js

document.getElementById("btn").onclick=function(){
  var elem = document.getElementById("content");
  requestFullScreen(elem);
  /*
   注意这里的样式的设置表示全屏显示之后的样式,
   退出全屏后样式还在,
   若要回到原来样式,需在退出全屏里把样式还原回去
   (见写法三)
   */
  elem.style.height = '800px';
  elem.style.width = '1000px';
 };
 function requestFullScreen(element) {
  var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
  if (requestMethod) {
   requestMethod.call(element);
  } else if (typeof window.ActiveXObject !== "undefined") {
   var wscript = new ActiveXObject("WScript.Shell");
   if (wscript !== null) {
    wscript.SendKeys("{F11}");
   }
  }
 }

JS写法三

.html

<div style="margin:0 auto;height:600px;width:700px;">
 <div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" >
  <button id="btn">全屏</button>
  <h1>全屏展示和退出全屏</h1>
  <button id="btnn" >退出</button>
 </div>
</div>

.js

document.getElementById("btn").onclick=function(){
  var elem = document.getElementById("content");
  requestFullScreen(elem);
  /*
   注意这里的样式的设置表示全屏显示之后的样式,
   退出全屏后样式还在,
   若要回到原来样式,需在退出全屏里把样式还原回去
   */
  elem.style.height = '800px';
  elem.style.width = '1000px';
 };
document.getElementById("btnn").onclick=function () {
  exitFullscreen();
 };
 /*
  全屏显示
  */
function requestFullScreen(element) {
 var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
 requestMethod.call(element);
 };
 /*
  全屏退出
  */
function exitFullscreen() {
  var elem = document;
  var elemd = document.getElementById("content");
  if (elem.webkitCancelFullScreen) {
   elem.webkitCancelFullScreen();
  } else if (elem.mozCancelFullScreen) {
   elemd.mozCancelFullScreen();
  } else if (elem.cancelFullScreen) {
   elem.cancelFullScreen();
  } else if (elem.exitFullscreen) {
   elem.exitFullscreen();
  } else {
   //浏览器不支持全屏API或已被禁用
  };

  /*
   退出全屏后样式还原
   */
  elemd.style.height = '500px';
  elemd.style.width = '700px'

 }

jQuery写法四

.html

<div id="cont" STYLE="width: 500px;height: 300px;background-color: aliceblue;margin: auto">
 <button id="btn">全屏&退出</button>
</div>

.css

.full{
   position: fixed;
   align-content: center;
   /*top: 10px;*/
   /*left: 10px;*/
   /*
    原来基础的百分百
   */
   width: 100%;
   height: 100%;
   overflow: auto;
  }

fullScreen.js

(function ($) {

 // Adding a new test to the jQuery support object
 $.support.fullscreen = supportFullScreen();

 // Creating the plugin
 $.fn.fullScreen = function (props) {

  if (!$.support.fullscreen || this.length != 1) {

   // The plugin can be called only
   // on one element at a time

   return this;
  }

  if (fullScreenStatus()) {
   // if we are already in fullscreen, exit
   cancelFullScreen();
   return this;
  }

  // You can potentially pas two arguments a color
  // for the background and a callback function

  var options = $.extend({
   'background': '#111',
   'callback': function () {}
  }, props);

  // This temporary div is the element that is
  // actually going to be enlarged in full screen

  var fs = $('<div>', {
   'css': {
    'overflow-y': 'auto',
    'background': options.background,
    'width': '100%',
    'height': '100%',
    'align': 'center'
   }
  });

  var elem = this;

  // You can use the .fullScreen class to
  // apply styling to your element
  elem.addClass('fullScreen');

  // Inserting our element in the temporary
  // div, after which we zoom it in fullscreen
  fs.insertBefore(elem);
  fs.append(elem);
  requestFullScreen(fs.get(0));

  fs.click(function (e) {
   if (e.target == this) {
    // If the black bar was clicked
    cancelFullScreen();
   }
  });

  elem.cancel = function () {
   cancelFullScreen();
   return elem;
  };

  onFullScreenEvent(function (fullScreen) {

   if (!fullScreen) {

    // We have exited full screen.
    // Remove the class and destroy
    // the temporary div

    elem.removeClass('fullScreen').insertBefore(fs);
    fs.remove();
   }

   // Calling the user supplied callback
   options.callback(fullScreen);
  });

  return elem;
 };


 // These helper functions available only to our plugin scope.


 function supportFullScreen() {
  var doc = document.documentElement;

  return ('requestFullscreen' in doc) ||
   ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
   ('webkitRequestFullScreen' in doc);
 }

 function requestFullScreen(elem) {
  if (elem.requestFullscreen) {
   elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
   elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullScreen) {
   elem.webkitRequestFullScreen();
  }
 }

 function fullScreenStatus() {
  return document.fullscreen ||
   document.mozFullScreen ||
   document.webkitIsFullScreen;
 }

 function cancelFullScreen() {
  if (document.exitFullscreen) {
   document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
   document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
   document.webkitCancelFullScreen();
  }
 }

 function onFullScreenEvent(callback) {
  $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function () {
   // The full screen status is automatically
   // passed to our callback as an argument.
   callback(fullScreenStatus());
  });
 }

})(jQuery);

myJS.js

$(function () {
  $("#btn").click(function () {
   $("#cont").fullScreen();
  })
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
权威JavaScript 中的内存泄露模式
Aug 13 Javascript
js 判断 enter 事件
Feb 12 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
js设置文字颜色的方法示例
Dec 30 #Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 #Javascript
原生JS实现图片左右轮播
Dec 30 #Javascript
零基础轻松学JavaScript闭包
Dec 30 #Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 #Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 #Javascript
You might like
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP的博客ping服务代码
2012/02/04 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
javascript引用对象的方法
2007/01/11 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python2 对excel表格操作完整示例
2020/02/23 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
网络编辑求职信
2014/04/30 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
岳庙导游词
2015/02/04 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
公司员工管理制度
2015/08/04 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏