js之切換全屏和退出全屏實(shí)現(xiàn)代碼實(shí)例
更新時(shí)間：2019年09月09日 14:16:49 作者：挑戰(zhàn)者V
這篇文章主要介紹了js之切換全屏和退出全屏實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了js之切換全屏和退出全屏實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
應(yīng)用場(chǎng)景:
比如很多網(wǎng)頁(yè)游戲全屏之類的，或者是網(wǎng)上看小說(shuō)等。
核心代碼:
//控制全屏
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
parseFloat()方法可以解析一個(gè)字符串，并返回一個(gè)浮點(diǎn)數(shù)。本文給大家分享javascript parsefloat()方法的相關(guān)知識(shí)，對(duì)javascript parsefloat相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
手把手教會(huì)你用Javascript實(shí)現(xiàn)放大鏡效果(詳細(xì)注釋+完整代碼)
放大鏡可以說(shuō)是前端人必須學(xué)會(huì)的程序之一,下面這篇文章主要給大家介紹了關(guān)于手把手教會(huì)你用Javascript實(shí)現(xiàn)放大鏡效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
詳解JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置
這篇文章主要為大家介紹了JavaScript的計(jì)時(shí)器和按鈕效果設(shè)置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
JavaScript Canvas編寫炫彩的網(wǎng)頁(yè)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript Canvas編寫炫彩的網(wǎng)頁(yè)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
淺談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序
下面小編就為大家?guī)?lái)一篇淺談js函數(shù)三種定義方式 & 四種調(diào)用方式 & 調(diào)用順序。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了JS制作圖形驗(yàn)證碼實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序?qū)崿F(xiàn)頂部固定 底部分頁(yè)滾動(dòng)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頂部固定底部分頁(yè)滾動(dòng)效果，本文大概給大家分享三種解決方案，每種方案給大家詳細(xì)剖析通過(guò)代碼解析哪種方案更適合，感興趣的朋友跟隨小編一起看看吧2022-10-10
這篇文章主要介紹了JavaScript 詳解預(yù)編譯原理的相關(guān)資料,需要的朋友可以參考下2017-01-01
最近使用到了jstree，感覺(jué)是一款靈活的、可多項(xiàng)定制的tree插件。下面通過(guò)本文給大家詳細(xì)介紹下jstree的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了js表單中選擇框值的獲取及表單的序列化，學(xué)習(xí)表單中單選、多選、選擇框值的獲取,需要的朋友可以參考下2015-12-12