HTML5是一種用于 Web 設計和開發的新技術，提供了許多新特性。其中一個功能是使用場景切換代碼進行網頁設計。
使用HTML5場景切換功能可以讓您在不離開當前網頁的情況下，將用戶帶到另一個 Web 場景中。這個過程通過使用場景轉換代碼完成。下面是一個簡單的例子:
<!DOCTYPE html>
<html>
<head>
<title>場景切換功能</title>
<meta charset="utf-8">
<style>
.scene1, .scene2 {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-color: #000;
color: #fff;
text-align: center;
}
.scene2 {
display: none;
}
</style>
</head>
<body>
<div class="scene1">
<h1>這是場景1</h1>
<button onclick="swapScenes()">進入場景2</button>
</div>
<div class="scene2">
<h1>這是場景2</h1>
<button onclick="swapScenes()">返回場景1</button>
</div>
<script>
function swapScenes() {
var scene1 = document.querySelector('.scene1');
var scene2 = document.querySelector('.scene2');
if (scene1.style.display === 'none') {
scene1.style.display = 'block';
scene2.style.display = 'none';
} else {
scene1.style.display = 'none';
scene2.style.display = 'block';
}
}
</script>
</body>
</html>在這個例子中，我們創建了兩個 div 元素，一個代表場景 1，另一個代表場景 2。我們設置這兩個場景都為全屏，并給它們不同的背景色和文本顏色。我們還為場景 2 設置了 display: none，這樣它就不會初始顯示，只有在用戶點擊“進入場景 2”按鈕后才會顯示。
在 script 標簽中，我們定義了一個名為 swapScenes() 的 JavaScript 函數。當用戶點擊按鈕時，這個函數將檢查當前頁面顯示的是哪個場景，并將其隱藏。然后，它會將另一個場景顯示出來。
HTML5場景切換功能是一個非常有用的工具，可以幫助您創建交互式的網頁。
下一篇.css hide