JS 如何判断当前页面是否全屏

点击事件

      <span class="iconfont icon-quanping1" @click="fullscreenchange"></span>

js 代码

    fullscreenchange() {
    // fullScreen 被弃用
    // const isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement
    
    // 最新写法
	  const isFullScreen = document.fullscreenElement
      
      if (isFullScreen) {
        console.log('退出全屏')
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
      } else {
        var fullscreen = this.$refs.fullscreen   // 需要全屏的元素
        console.log('进入全屏')
        if (fullscreen.requestFullscreen) {
          fullscreen.requestFullscreen()
        } else if (fullscreen.mozRequestFullScreen) {
          fullscreen.mozRequestFullScreen()
        } else if (fullscreen.webkitRequestFullscreen) {
          fullscreen.webkitRequestFullscreen()
        } else if (fullscreen.msRequestFullscreen) {
          fullscreen.msRequestFullscreen()
        }
      }
    }

参考官网MDN 官网

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
以下是一个简单的全屏页面切换特效的示例代码,可以用来实现网站的页面切换效果。代码中使用了 jQuery 和 CSS3 动画效果。 HTML 代码: ``` <div class="page-container"> <div class="page" id="page1"> <h1>Page 1</h1> <p>This is the first page.</p> </div> <div class="page" id="page2"> <h1>Page 2</h1> <p>This is the second page.</p> </div> <div class="page" id="page3"> <h1>Page 3</h1> <p>This is the third page.</p> </div> </div> ``` CSS 代码: ``` body { margin: 0; padding: 0; overflow: hidden; } .page-container { position: relative; width: 100%; height: 100%; } .page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; } .page.active { display: block; } .page.in { animation: fadeIn 1s ease-in-out; } .page.out { animation: fadeOut 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } ``` JavaScript 代码: ``` $(document).ready(function() { showPage($("#page1")); $(".nav-link").click(function(event) { event.preventDefault(); var page = $($(this).attr("href")); showPage(page); }); }); function showPage(page) { $(".page.active").addClass("out"); setTimeout(function() { $(".page.active").removeClass("active out"); page.addClass("in active"); }, 1000); } ``` 在这个示例中,页面通过一个包含多个子页面的容器来实现。每个子页面都是一个具有唯一标识符的 DIV 元素,并且通过 CSS 的绝对定位来覆盖整个容器。每个页面的默认状态是隐藏的,只有在它们被激活时才会显示。 当用户点击导航链接时,JavaScript 代码会获取目标页面的 ID 并使用 showPage() 函数来切换页面。该函数首先将当前活动页面标记为“out”,然后使用 CSS 动画效果淡出该页面。在动画完成后,该页面的“active”和“out”类都被删除,而目标页面则被标记为“in”和“active”,并使用 CSS 动画效果淡入。 此外,该代码还使用了 jQuery 和 CSS3 动画效果来实现页面切换效果。在这个示例中,我们使用了“fadeIn”和“fadeOut”动画,它们分别在页面淡入和淡出时播放。 以上就是一个简单的全屏页面切换特效的示例代码,你可以根据自己的需要进行修改和定制。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值