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 相关文章推荐
javascript一点特殊用法
May 28 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
js实现类似新浪微博首页内容渐显效果的方法
Apr 10 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 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
JAVA/JSP学习系列之二
2006/10/09 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
nginx 设置多个站跨域
2021/03/09 Servers
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
jquery 选取方法都有哪些
2014/05/18 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
Vue.js实现分页查询功能
2020/11/15 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
npm qs模块使用详解
2020/02/07 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
学习python处理python编码问题
2011/03/13 Python
python多线程编程中的join函数使用心得
2014/09/02 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
英国航空官网:British Airways
2016/09/11 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
节水倡议书范文
2014/04/15 职场文书
运动会宣传口号
2014/06/09 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
Python中requests做接口测试的方法
2021/05/30 Python