js之切換全屏和退出全屏實現(xiàn)代碼實例
這篇文章主要介紹了js之切換全屏和退出全屏實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
應(yīng)用場景:
比如很多網(wǎng)頁游戲全屏之類的,或者是網(wǎng)上看小說等。
核心代碼:
//控制全屏 function enterfullscreen() { //進(jìn)入全屏 $("#fullscreen").html("退出全屏"); 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 exitfullscreen() { //退出全屏 $("#fullscreen").html("切換全屏"); if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if(document.msExitFullscreen) { document.msExitFullscreen(); } } var a = 0; $('#fullscreen').on('click', function() { a++; a % 2 == 1 ? enterfullscreen() : exitfullscreen(); })
前端代碼:
<a type="button" id="fullscreen" class="btn btn-default visible-lg visible-md"><i class="fa fa-refresh" aria-hidden="true"></i> 切換全屏</a>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
手把手教會你用Javascript實現(xiàn)放大鏡效果(詳細(xì)注釋+完整代碼)
放大鏡可以說是前端人必須學(xué)會的程序之一,下面這篇文章主要給大家介紹了關(guān)于手把手教會你用Javascript實現(xiàn)放大鏡效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03JavaScript Canvas編寫炫彩的網(wǎng)頁時鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫炫彩的網(wǎng)頁時鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-10-10淺談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序
下面小編就為大家?guī)硪黄獪\談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02微信小程序?qū)崿F(xiàn)頂部固定 底部分頁滾動效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頂部固定底部分頁滾動效果,本文大概給大家分享三種解決方案,每種方案給大家詳細(xì)剖析通過代碼解析哪種方案更適合,感興趣的朋友跟隨小編一起看看吧2022-10-10