欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用html5 js實現(xiàn)點擊一個按鈕達到瀏覽器全屏效果

 更新時間:2014年05月28日 09:06:47   投稿:whsnow  
點擊一個按鈕要實現(xiàn)按F11全屏的效果。 在HTML5中,W3C制定了關(guān)于全屏的API,就可以實現(xiàn)全屏幕的效果

項目中需要將后臺瀏覽器的窗口全屏,也就是我們點擊一個按鈕要實現(xiàn)按F11全屏的效果。 在HTML5中,W3C制定了關(guān)于全屏的API,就可以實現(xiàn)全屏幕的效果,也可以讓頁面中的圖片,視頻等全屏目前只有g(shù)oogle chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

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();

}

退出全屏 

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 

事件監(jiān)聽

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false); 

全屏樣式設(shè)置

在瀏覽器全屏的使用我們還可以進行樣式設(shè)置

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 

附錄

1 一個在線的Demo

    http://robnyman.github.io/fullscreen/

2   HTML5全屏API之網(wǎng)絡(luò)釣魚

      http://www.36ria.com/5807

3   jquery封裝的全屏插件

     http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4  更加詳細的全屏API介紹

    4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

    4.2  https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5  HTML5全屏API在FireFox/Chrome中的顯示差異

   http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

相關(guān)文章

  • 含有CKEditor的表單如何提交

    含有CKEditor的表單如何提交

    如何提交含有CKEditor的表單,其實很簡單的在提交事件中加入這一句即可解決問題
    2014-01-01
  • 簡單時間提示DEMO從0開始一直進行計時

    簡單時間提示DEMO從0開始一直進行計時

    點擊按鈕輸入框會從0開始一直進行計時,具體的實現(xiàn)示例如下,感興趣的朋友可以嘗試操作下哦
    2013-11-11
  • Js面試算法詳解

    Js面試算法詳解

    AI的興起,使得大家對算法的關(guān)注也越來越高。而作為一個前端工程師,算法很多時候是我們的弱點,本文譯自國外一篇面試題。列出了一些簡單算是跟算法相關(guān)的面試題
    2018-04-04
  • Javascript函數(shù)式編程簡單介紹

    Javascript函數(shù)式編程簡單介紹

    什么是函數(shù)式編程?根據(jù)百度百科的描述,“函數(shù)式編程是種編程典范,它將電腦運算視為函數(shù)的計算。函數(shù)編程語言最重要的基礎(chǔ)是 λ 演算(lambda calculus)。而且λ演算的函數(shù)可以接受函數(shù)當作輸入(參數(shù))和輸出(返回值)?!?/div> 2015-10-10
  • JavaScript ES6中類與模塊化管理超詳細講解

    JavaScript ES6中類與模塊化管理超詳細講解

    JavaScript中的模塊化是指將每個js文件會被認為單獨一個的模塊。模塊之間是互相不可見的。如果一個模塊需要使用另一個模塊,那么需要通過指定語法來引入要使用的模塊,而且只能使用引入模塊所暴露的內(nèi)容
    2023-01-01
  • 楊氏矩陣查找的JS代碼

    楊氏矩陣查找的JS代碼

    楊氏矩陣查找的JS代碼,需要的朋友可以參考一下
    2013-03-03
  • JavaScript中的迭代器和生成器詳解

    JavaScript中的迭代器和生成器詳解

    這篇文章主要介紹了JavaScript中的迭代器和生成器詳解,本文講解了迭代器、聲明自定義迭代器、生成器:一種更好的方式來構(gòu)建迭代器、生成器高級特性等內(nèi)容,需要的朋友可以參考下
    2014-10-10
  • javascript實現(xiàn)二級級聯(lián)菜單的簡單制作

    javascript實現(xiàn)二級級聯(lián)菜單的簡單制作

    這篇文章主要介紹了javascript實現(xiàn)二級級聯(lián)菜單的簡單制作,感興趣的小伙伴們可以參考一下
    2015-11-11
  • js 創(chuàng)建對象 經(jīng)典模式全面了解

    js 創(chuàng)建對象 經(jīng)典模式全面了解

    下面小編就為大家?guī)硪黄猨s 創(chuàng)建對象 經(jīng)典模式全面了解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08
  • escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法

    escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法

    這篇文章主要介紹了escape編碼與unescape解碼漢字出現(xiàn)亂碼的解決方法,需要的朋友可以參考下
    2014-07-07

最新評論