色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css全屏 類似F11

劉柏宏2年前10瀏覽0評論

CSS全屏是一種通過CSS樣式控制所呈現內容的大小和位置,使其完全覆蓋整個窗口的方法。類似于使用F11全屏模式的效果,但是并不是完全相同,CSS全屏更加靈活,并可以自定義所要顯示的內容。下面是實現CSS全屏的代碼:

html, body {
height: 100%;
margin: 0;
padding: 0;
}
#fullscreen {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 9999;
}

在代碼中,首先需要將HTML和body的高度都設為100%,并把margin和padding都設為0,這樣就可以讓要顯示的內容充滿整個頁面。然后在CSS中定義一個ID為fullscreen的元素,將它的寬和高度都設為100%,并且使用fixed定位將它固定在窗口的左上角。

在HTML代碼中需要添加一個要進行CSS全屏的元素,并給它添加一個click事件,當點擊該元素時,就可以調用JavaScript代碼將全屏元素添加到頁面中來。下面是示例代碼:

<div id="myfullscreen">
<p>這里是要進行全屏顯示的內容...</p>
<button onclick="toggleFullScreen()">全屏</button>
</div>
function toggleFullScreen() {
var elem = document.getElementById("myfullscreen");
if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
}
}

在代碼中,首先定義了一個ID為myfullscreen的元素,并給它添加了一個click事件,當點擊該元素時,就會調用toggleFullScreen()函數。函數中首先判斷當前瀏覽器是否支持全屏模式,如果不支持,則直接退出,并且如果當前已經是全屏模式,則退出全屏模式,否則就將myfullscreen元素全屏顯示。