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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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常用函数 推荐收藏保存
2010/02/21 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
python实现socket端口重定向示例
2014/02/10 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python3 pygame实现接小球游戏
2019/05/14 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Python中的面向接口编程示例详解
2021/01/17 Python
C++的几个面试题附答案
2016/08/03 面试题
工商行政管理专业求职书
2014/05/23 职场文书
保安公司服务承诺书
2014/05/28 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers