HTML5全屏操作API

2022-09-07 03:45:08 字數 1481 閱讀 8471

①基本:

②由於相容性的原因(在ie9以下不支援,但是在高階瀏覽器新版本支援),不同瀏覽器需要新增不同的私有字首(在js中也有私有字首,在方法屬性之前加上即可,並且首字母需大寫)

<

script

>

//將瀏覽器字首相容封裝成函式

function

tofullvideo()

else

if(videodom.webkitrequestfullscreen)

else

if(videodom.mozrequestfullscreen)

else

}script

>

③頁面全屏(頁面文件全屏)

document.documentelement.webkitrequestfullscreen()
④取消頁面全屏(跟元素沒有關係)

document.webkitcancelfullscreen;

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>html5全屏操作

title

>

<

style

>

.box

style

>

head

>

<

body

>

<

div

class

="box"

>

div>

<

button

class

="btn1"

>全屏顯示

button

>

<

button

class

="btn2"

>取消全屏

HTML5實現全屏API 進入和退出全屏

現在主流瀏覽器基本上實現了全屏效果,但是不同瀏覽器實現不一樣 進入和退出全屏 webkit works in safari5.1 and chrome 15 element.webkitrequestfullscreen document.webkitcancelfullscreen firefox...

HTML5實現全屏API 進入和退出全屏

現在主流瀏覽器基本上實現了全屏效果,但是不同瀏覽器實現不一樣 進入和退出全屏 webkit works in safari5.1 and chrome 15 element.webkitrequestfullscreen document.webkitcancelfullscreen firefox...

html5退出全屏觸發的方法 HTML5 拖放

本節我們學習 html5 中的拖放,拖放是一種常見的特性,也就是抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。拖放是由拖動與釋放兩部分組成,拖放事件也分為被拖動元素的相關事件,和容器的相關事件。我們通過上述的拖放事件來實現將下圖 你好,俠課島 拖放到上面的矩...