js 全屏代码实现方法

 1 /* 全屏方法
 2  * =========
 3     <button class="roll-nav roll-right fullscreen">
 4         <i class="fa fa-arrows-alt"></i>
 5     </button>
 6 */
 7 +function ($) {
 8     ‘use strict‘;
 9
10     /*
11     * [setFullscreen 设置全屏]
12     * @param {domElement} element [DOM节点对象(可选)]
13     */
14     var setFullscreen = function (element) {
15         var el = element instanceof HTMLElement ? element : document.documentElement;
16         var rfs = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;
17         if (rfs) {
18             rfs.call(el);
19         } else if (window.ActiveXObject) {
20             var ws = new ActiveXObject("WScript.Shell");
21             ws && ws.SendKeys("{F11}");
22         }
23     }
24     /*
25     * [exitFullscreen 退出全屏]
26     */
27     var exitFullscreen = function () {
28         var efs = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen;
29         if (efs) {
30             efs.call(document);
31         } else if (window.ActiveXObject) {
32             var ws = new ActiveXObject("WScript.Shell");
33             ws && ws.SendKeys("{F11}");
34         }
35     }
36
37     var isFullScreen = false;
38     var handleFullScreen = function () {
39         if (isFullScreen) {
40             exitFullscreen();
41             isFullScreen = false;
42         } else {
43             setFullscreen();
44             isFullScreen = true;
45         }
46     }
47
48     $("button.fullscreen").on(‘click‘, function (event) {
49         handleFullScreen();
50     });
51 }(jQuery);

原文地址:https://www.cnblogs.com/wsk198726/p/11631488.html

时间: 2024-08-07 04:03:16

js 全屏代码实现方法的相关文章

JS 全屏代码

// 推断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkit

关于最近在做的一个js全屏轮播插件

最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用margin-left的值不断变化,来改变显示哪张照片,当达到最后一张的时候,将第一张照片appendChild到最后一张照片的后面,如果有左右移动的话,当到达第一张照片时,还要继续左移动的话,就将最后一张照片利用insertBefore,将最后一张照片放在第一张照片的前面,这两个方法都只是改变子元素

WPF Popup全屏 弹出方法。解决只显示75%的问题。

WPF Popup全屏 弹出方法.解决只显示75%的问题. WPF 中 Popup 有一个特点.当Popup的高度超过屏幕的75%的时候,只显示75%的高度. 如下代码: <Window x:Class="WpfApplication13.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.micro

Android编程实现WebView全屏播放的方法

这篇文章主要介绍了Android编程实现WebView全屏播放的方法,结合实例形式较为详细的分析了Android实现WebView全屏播放的布局与功能相关技巧,需要的朋友可以参考下! 本文实例讲述了Android编程实现WebView全屏播放的方法.分享给大家供大家参考,具体如下: 最近因为项目要用webview加载html5的视频,开始不能全屏播,做了很久才做出来!那按我的理解说下怎么实现全屏吧. 首先写布局文件activity_main.xml: <LinearLayout xmlns:an

js全屏滚动效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>全屏滚动代码测试</title> 6 <style type="text/css"> 7 body,ul,li{ margin: 0; padding: 0;} 8 #tbody{ overflow: hidden; clear: both;

jquery.fullPage.js全屏滚动插件

效果演示 网站   http://www.51xuediannao.com/demo.php 插件下载  http://www.51xuediannao.com/js/jquery/jquery.fullPage.html jquery.fullPage.js是一个全屏滚动插件,本文提供jquery.fullPage实例教程演示 看啥都不如看演示来的直观,走起! 基本滚动 http://www.51xuediannao.com/js/jquery/jquery.fullPage/index2.h

基于Ascensor.js全屏切换页面插件

今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="general"> <div id="content"> <!--Contenu1--> <div> <div class="contenu&

基于js全屏动画焦点图幻灯片

今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slideshow" id="slideshow"> <ol class="slides"> <li class="current"> <div class="description"&g

Android实现全屏显示的方法

我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManifest.xml的配置文件里面的<activity>标签添加属性: android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 2.在Activity的onCreate()方法中的super()和setContentVie