JS实现指定区域的全屏显示功能示例

 更新时间:2019年04月25日 09:57:15   作者:guanguan0_0   我要评论

这篇文章主要介绍了JS实现指定区域的全屏显示功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

本文实例讲述了JS实现指定区域的全屏显示功能。分享给大家供大家参考,具体如下:

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>www.41204113.com js指定区域全屏</title>
    <style>
      #fulldiv {
        background: #fff;
        width: 100%;
        text-align: center;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <h1>指定区域全屏测试</h1>
    <button id="btn">全屏按钮</button>
    <div id="fulldiv">
      <h1>这里是全屏显示的内容</h1>
    </div>
  </body>
  <script>
    var fullscreen = false;
    let btn = document.getElementById('btn');
    let fullarea = document.getElementById('fulldiv')
    btn.addEventListener('click',function(){  
      if (fullscreen) {    // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {    // 进入全屏
        if (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      fullscreen = !fullscreen;
    })
  </script>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述?#28304;?#23478;JavaScript程序设计?#20852;?#24110;助。

相关文章

  • JavaScript内存泄漏的处理方式

    JavaScript内存泄漏的处理方式

    这篇文章主要介绍了JavaScript内存泄漏的处理方式,通过理论和实例结合的方式让你理解的更加透彻。
    2017-11-11
  • JS字符串函数扩展代码

    JS字符串函数扩展代码

    JS字符串函数扩展代码,大家可以参考下prototype的使用方法,扩展自己的字符串处理函数。
    2011-09-09
  • js对文章内容进行分页示例代码

    js对文章内容进行分页示例代码

    这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下
    2014-03-03
  • 微信小程序开发探究

    微信小程序开发探究

    这篇文章主要介绍了微信小程序开发探究,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • NodeJS与Mysql的交互示例代码

    NodeJS与Mysql的交互示例代码

    实现NodeJS与Mysql的交互首先把Mysql Module装到NodeJS中,具体实现及结果截图如下,有此需求的朋友可以参考下,希望?#28304;?#23478;?#20852;?#24110;助
    2013-08-08
  • javascript显示用户停留时间的简单实例

    javascript显示用户停留时间的简单实例

    这篇文章介绍了javascript显示用户停留时间的简单实例,有需要的朋友可以参?#23478;?#19979;
    2013-08-08
  • JS去除数组重复值的五种不同方法

    JS去除数组重复值的五种不同方法

    去除数组重复值的方法有很多,本文整理了四种不同方式,在此与大家分享下,希望?#28304;?#23478;?#20852;?#24110;助
    2013-09-09
  • ?#31243;窲S中的反柯里化( uncurrying)

    ?#31243;窲S中的反柯里化( uncurrying)

    本篇文章主要介绍了?#31243;窲S中的反柯里化( uncurrying),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • js 自制滚动条的小例子

    js 自制滚动条的小例子

    js 自制滚动条的小例子,需要的朋友可以参?#23478;?#19979;
    2013-03-03
  • 简洁短小的 JavaScript IE 浏览器判定代码

    简洁短小的 JavaScript IE 浏览器判定代码

    IE浏览器?#36824;?#26159;什么版本,总是跟Web标?#21152;行?#19981;太兼容。对于代码工作者?#27492;擔?#33258;然是苦不堪言,为了考虑IE的兼容问题,?#36824;?#26159;写 CSS 还是 JS,往往?#23478;?#23545; IE 特别?#28304;?#36825;就少不了做些判断。本文不讨论如何区分 IE 的样式,仅是 JS 判定 IE 浏览器。
    2010-03-03

最新评论

时时彩包赢公式0369