精华内容
下载资源
问答
  • 这是一款炫彩动画效果的网站菜单展开代码,js点击全屏打开导航菜单动画特效下载。
  • JavaScript点击全屏.html

    2021-07-16 10:26:58
    利用JavaScript和Html5提供的一些API进入全屏JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境...
  • Js点击全屏的代码

    2014-07-19 11:02:02
    Js点击全屏的代码,IE下有问题,最好在火狐、Google浏览器下浏览,点击文字即可实现全屏效果,你最好是在页面上放置一个按钮,点击此按钮实现全屏功能。 点击(...
    • Js点击全屏的代码,IE下有问题,最好在火狐、Google浏览器下浏览,点击文字即可实现全屏效果,你最好是在页面上放置一个按钮,点击此按钮实现全屏功能。

    点击(此处)折叠或打开

    1. <html>
    2. <head>
    3. <title>Js点击实现全屏的代码</title>
    4. <script language=\"javascript\" type=\"text/javascript\">
    5. function openWin()
    6. {
    7. setTimeout(\"RunScript()\",1000);
    8. }
    9. function RunScript()
    10. {
    11. x.DOM.Script.execScript(shellscript.toString());
    12. x.DOM.Script.setTimeout(\"shellscript()\");
    13. }
    14. function shellscript(){
    15. open(\"/index.html\",\"\",\"fullscreen=yes\");
    16. }
    17. </script>
    18. </head>
    19. <body>
    20. <object id=\"x\" classid=\"clsid:2D360201-FFF5-11d1-8D03-00A0C959BC0A\" width=\"0\" height=\"0\" align=\"middle\">
    21. <PARAM NAME=\"ActivateApplets\" VALUE=\"1\">
    22. <PARAM NAME=\"ActivateActiveXControls\" VALUE=\"1\">
    23. </object>
    24. <a href=\"javascript:openWin();\">点击全屏</a>
    25. </body>
    26. </html>


    来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/29737856/viewspace-1222596/,如需转载,请注明出处,否则将追究法律责任。

    转载于:http://blog.itpub.net/29737856/viewspace-1222596/

    展开全文
  • 图片点击全屏显示JS代码
  • // 检测当前是否全屏 function isFullScreen() { var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement); return isFull; }; ...

    效果图

    点击进入全屏

    核心代码

    // 检测当前是否全屏
    function isFullScreen() {
        var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
        return isFull;
    };
    
    // 退出全屏 
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    };
    
    // 进入全屏
    function handleFullScreen(element) {
        console.log(element, "element");
    
        if (element.requestFullscreen) {
            console.log(1);
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            console.log(2);
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            console.log(3);
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            console.log(4);
            element.msRequestFullscreen();
        }
    };
    

    完整案例

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>点击全屏</title>
    </head>
    <style>
        .fullBox {
            width: 600px;
            height: 400px;
            padding: 100px;
            text-align: center;
            margin: 30px auto;
            background-color: pink;
            box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
        }
    
        .btn {
            font-size: 20px;
        }
    </style>
    
    <body>
        <div id="box" class="fullBox">
            Hello World 点击我试试
            <button id="btn" class="btn" onclick="handleClick(event)">进入全屏</button>
        </div>
    
        <script>
            // 监听窗口大小
            window.onresize = function () {
                var isFull = isFullScreen();
                const btn = document.getElementById("btn");
                if (isFull === false) {
                    btn.innerHTML = "进入全屏";
                } else {
                    btn.innerHTML = "退出全屏";
                }
            };
    
            const handleClick = (e) => {
                const el = e.target;
    
                // 检测当前是否是全屏状态
                var isFull = isFullScreen();
                if (isFull) {
                    el.innerHTML = "进入全屏";
                    exitFullscreen();
                } else {
                    el.innerHTML = "退出全屏";
                    const box = document.getElementById("box");
                    handleFullScreen(box);
                }
            };
    
            // 检测当前是否全屏
            function isFullScreen() {
                var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
                return isFull;
            };
    
            // 退出全屏 
            function exitFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            };
    
            // 进入全屏
            function handleFullScreen(element) {
                console.log(element, "element");
    
                if (element.requestFullscreen) {
                    console.log(1);
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    console.log(2);
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    console.log(3);
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) {
                    console.log(4);
                    element.msRequestFullscreen();
                }
            };
        </script>
    </body>
    </html>
    
    展开全文
  • js-点击全屏

    2020-12-01 09:23:19
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...button
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <button onclick="toggleFullScreen(event)">点我全屏</button>
        <script>
            function FullScreen(el) {
                var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
                if (!isFullscreen) { //进入全屏,多重短路表达式
                    (el.requestFullscreen && el.requestFullscreen()) ||
                        (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
                        (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) || (el.msRequestFullscreen && el.msRequestFullscreen());
    
                } else { //退出全屏,三目运算符
                    document.exitFullscreen ? document.exitFullscreen() :
                        document.mozCancelFullScreen ? document.mozCancelFullScreen() :
                            document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
                }
            }
    
            function toggleFullScreen(e) {
                var el = e.srcElement || e.target; //target兼容Firefox
                el.innerHTML == '点我全屏' ? el.innerHTML = '退出全屏' : el.innerHTML = '点我全屏';
                FullScreen(el);
            }
        </script>
    </body>
    
    </html>
    
    展开全文
  • 目录 全屏和退出全屏 浏览器全屏API ...引入require.js,具体怎么操作就不说了,下面来看一个全屏的功能JS: define([], function() { 'use strict'; var _exitFullScreen = false; var buttonEL; ...

    目录

    全屏和退出全屏

    浏览器全屏API

    语法

    示例

    API规格

    浏览器兼容性

    参阅


     

    全屏和退出全屏

    引入require.js,具体怎么操作就不说了,下面来看一个全屏的功能JS:

    define([], function() {
        'use strict';
        var _exitFullScreen = false;
        var buttonEL;
        var continerEL;
        function init(option){
            continerEL = document.getElementById(option.continerId);
            buttonEL = document.getElementById(option.buttonId);
            buttonEL.onclick = _fullscreen;
        }
        function _fullscreen(element){
        	if(!_exitFullScreen){//当前非全屏状态,则进入全屏
        		//W3C 
        		if (continerEL.requestFullscreen) { 
            		continerEL.requestFullscreen(); 
        		}
        		//FireFox 
        		else if (continerEL.mozRequestFullScreen) { 
        			continerEL.mozRequestFullScreen();
        		}
        		//Chrome等 
        		else if (continerEL.webkitRequestFullScreen) { 
        			continerEL.webkitRequestFullScreen(); 
        		}
        		//IE11
        		else if (continerEL.msRequestFullscreen) {
        			continerEL.msRequestFullscreen();
        		}
        		element.target.innerHTML = '退出全屏';
        	}else{//当前为全屏状态,则退出全屏
        		if (document.exitFullscreen) { 
            		document.exitFullscreen(); 
        		} 
        		else if (document.mozCancelFullScreen) { 
        			document.mozCancelFullScreen(); 
        		} 
        		else if (document.webkitCancelFullScreen) { 
        			document.webkitCancelFullScreen(); 
        		} 
        		else if (document.msExitFullscreen) { 
        			document.msExitFullscreen();
        		}
        		element.target.innerHTML = '全屏';
        	}
        	_exitFullScreen = !_exitFullScreen;
        }
    
        return {
            init:init
        }
    });

    浏览器全屏API

    https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen

    Document.exitFullscreen() 方法用于让当前文档退出全屏模式(原文表述不准确,详见备注)。调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态。

    备注: 如果一个元素A在请求进去全屏模式之前,已经存在其他元素处于全屏状态,当这个元素A退出全屏模式之后,之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。

    语法

    document.exitFullscreen();
    

    示例

    // 点击切换全屏模式
    document.onclick = function (event) { 
      if (document.fullscreenElement) { 
        document.exitFullscreen() 
      } else { 
        document.documentElement.requestFullscreen() 
      } 
    };

    API规格

    SpecificationStatusComment
    Fullscreen API
    Document.exitFullscreen()
    Living StandardInitial definition

    浏览器兼容性

     

    We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

    • Desktop
    •  
    • Mobile

     

    FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
    Basic support(Yes)-webkit
    45 (unprefixed)
    9.0 (9.0) as mozCancelFullScreen[1]
    47.0 (47.0)[1] (behind full-screen-api.unprefix.enabled
    ???
    FeatureAndroid WebkitChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
    Basic support(Yes)-webkit
    45 (unprefixed)
    (Yes)-webkit
    45 (unprefixed)
    9.0 (9.0) as mozCancelFullScreen[1]
    47.0 (47.0)[1] (behind full-screen-api.unprefix.enabled
    ???

    [1] 可通过Document.exitFullscreen()方法让全屏元素栈的栈顶元素退出全屏状态,并让新的栈顶的元素进入全屏状态。此特征在Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8)中被实现.

    参阅

    最后修改:

    2019年3月23日, by MDN contributors

    展开全文
  • <script type="text/javascript"> document.onkeydown=function(e){ e = e|| window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==122){ document.getElementById('bt').onclick(); e....
  • js代码实现,通过点击调用函数即可 var fscreen = function() { var el = document.documentElement var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen if (!...
  • 原生JS点击图标全屏esc、f11退出全屏

    千次阅读 2018-09-29 17:03:54
    html部分: &amp;amp;lt;span&amp;amp;gt; &amp;amp;lt;el-tooltip effect=&... '取消全屏' : '全屏'&amp;quot; placement=&amp;quot;bottom&amp;quot;&amp;amp;gt; &a
  • js <template> <div> <button @click="screen">全屏</button> </div> </template> export default { data () { return { fullscreen: false }; }, methods: { .
  • Js生成二维码 效果图 左边是放大前 右边是放大后 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <...
  • js点击按钮实现全屏效果

    千次阅读 2019-06-11 13:19:07
    多读多写多记录,多学多练多思考。... 写一个点击按钮实现全屏的效果,话不多说,直接上代码: 首先准备一个按钮,写上点击事件 <body> <!--准备一个按钮--> <button onclick="hand...
  • jQuery图片点击全屏预览特效是一款基于swiper.js制作的移动端图片点击全屏遮罩预览,双击或手指滑动控制图片切换缩放效果。
  • jQuery点击全屏波浪菜单代码是一款基于jQuery跟CSS3制作的点击汉堡包按钮开关全屏波浪动画显示子菜单特效。
  • CSS3左侧图标菜单点击全屏切换代码是一款鼠标点击网页左边的图标按钮动画效果切换全屏页面特效。
  • JS实现全屏

    2016-06-24 15:08:14
    这几天尽琢磨用JS实现全屏全屏了,折腾了好几天都没达到我要的效果,最后只能放弃了。虽说如此,折腾过程还是要贴贴的。   声明:所谓的全屏,就是在浏览器中按了F11的效果,什么菜单栏工具栏状态栏一律消失,就...
  • js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1、当用户点击某按钮,触发iframe下的页面全屏。 2、不允许用户退出全屏。 解决第一点,触发全屏可以按照网上的例子,代码如下: ...
  • 瀑布流排版鼠标点击全屏放大图片代码是一款采用瀑布流排版样式,鼠标点击相册可以网站全屏放大展示大图,同时也支持手机移动端网页。
  • 项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, ...
  • jquery 图片点击全屏放大展示 像浏览相册一样 浏览图片
  • 全屏js插件

    2018-04-17 11:22:26
    全屏js插件主要运用于web前端全屏预览,点击一次全屏,在此点击退出全屏
  • 需求描述:需要放大至全屏展示...(3)方法绑定至元素点击事件 代码: // 全屏事件 handleFullScreen(i) { let element = document.getElementsByClassName("graph")[i]; let bottomEle = document.getElements
  • js 页面全屏,退出全屏, fullScreen

    千次阅读 2017-09-11 10:53:32
    js 页面全屏,退出全屏, fullScreen

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,503
精华内容 7,801
关键字:

js点击全屏