Js 实现全屏

<input id="Button1" type="button" value="开始全屏" onclick="kaishi()" />
<input id="Button2" type="button" value="关闭全屏" onclick="guanbi()" />

<script>
    function kaishi()
    {
        var docElm = document.documentElement;
        //W3C
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
            //FireFox
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
            //Chrome等
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
            //IE11
        else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        }
    }

    function guanbi() {

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

    document.addEventListener("fullscreenchange", function () {

        fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
    }, false);

    document.addEventListener("mozfullscreenchange", function () {

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

    document.addEventListener("webkitfullscreenchange", function () {

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

    document.addEventListener("msfullscreenchange", function () {

        fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
    }, false);
</script>
时间: 2024-10-22 20:54:45

Js 实现全屏的相关文章

js控制全屏窗口

<script src="__PUBLIC__/Js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ findDimensions(); }); function findDimensions(){ var h = document.documentElement.clientHeight-100; $(&

原生js实现全屏滚动

原生js实现全屏滚动(firefox兼容性问题还没解决) 最近发现刷前端在线简历,发现许多人都使用了全屏滚动特效 所以今天特意来实现一下 css样式:* { margin: 0; padding: 0;}h1 { width: 200px; height: 200px; margin: 0 auto;}div{ overflow: hidden; position: absolute;}.show { display: block;} /*第一页*/#one { background: red;

fullpage.js jq全屏滚动插件

fullPage.js和fullPage都能实现全屏滚动,二者区别是:fullPage.js需依赖于JQuery库,而fullPage不需要依赖任何一个js库,可以单独使用. (代码演示效果并且可以下载查看http://www.dowebok.com/77.html) 一.fullPage.js实现全屏 fullPage.js是开源的JQuery插件库,其Github地址:https://github.com/alvarotrigo/fullPage.js 1.基本演示 1.1 引入文件 <!-

[分享]数字插件countUp.js和全屏滚动插件fullPage.js

分享两款js插件 1:数字插件countUp.js 项目github地址:http://inorganik.github.io/countUp.js/ 2:全屏滚动插件:fullPage.js 项目github地址:https://github.com/alvarotrigo/fullPage.js 示例地址:https://alvarotrigo.com/fullPage/ 原文地址:https://www.cnblogs.com/many-object/p/8405935.html

自己用js实现全屏滚动

参照fullPage.js的效果,用自己的想法实现的. 实现的效果:1.全屏滚动,滚动一下齿轮就会滚动全屏. 2.自适应缩放,无论怎么改变窗口的大小,都会保证用一个元素占满全屏. 下一步计划: 1.改成react组件 2.实现更多的效果 注释写的很清楚,基本上知道函数怎么用就可以了.有想法这东西就很简单. 这里偷懒使用了我之前写过的一个运动框架(其实就是一个函数),稍加修改就可以在这上面使用.框架相关:点击这里 注释非常详细了,就不说其他的了.直接上代码: 1 <!DOCTYPE html>

js 实现全屏预览(F11功能)--转

js代码 1 function fullScreen(el) { 2 var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, 3 wscript; 4 5 if(typeof rfs != "undefined" && rfs) { 6 rfs.call(el); 7 return; 8 } 9 1

AnimatedModal.js – CSS3 全屏模态窗口

AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firefox.Chrome.Safari.Opera 和 IE 10+ 浏览器. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很

兼容IE浏览器的js浏览器全屏代码

众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: function fullScreen() { var el = document.documentElement; var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.m

JS框架_(jQuery.js)文章全屏动画切换

文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="