HTML5 全屏翻頁是一種新型的頁面展示方式，它提供了更好的交互性和視覺效果。以下是一個簡單的 HTML5 全屏翻頁代碼示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 全屏翻頁示例</title>
<style>
body {
margin: 0;
padding: 0;
}
.page {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
}
.page.active {
display: block;
}
</style>
</head>
<body>
<div class="page active">
<h1>第一頁</h1>
<p>這是第一頁內容。</p>
</div>
<div class="page">
<h1>第二頁</h1>
<p>這是第二頁內容。</p>
</div>
<div class="page">
<h1>第三頁</h1>
<p>這是第三頁內容。</p>
</div>
<script>
var pages = document.querySelectorAll('.page');
var currentPage = 0;
function showPage(index) {
if (index >= pages.length) {
return;
}
if (index < 0) {
return;
}
pages[currentPage].classList.remove('active');
currentPage = index;
pages[currentPage].classList.add('active');
}
document.addEventListener('keydown', function (event) {
if (event.keyCode === 37) {
showPage(currentPage - 1);
}
if (event.keyCode === 39) {
showPage(currentPage + 1);
}
});
</script>
</body>
</html>代碼解析：
首先，我們定義了一個全屏的容器，并隱藏了所有的頁面。每個頁面都使用.page類來標記。顯然，當前活動頁總是具有.active類。
接著，我們定義了一個 JavaScript 函數showPage(index)，它根據當前頁的索引顯示指定頁。這個函數同樣用于清除當前頁的.active類。
最后，我們在頁面中注冊了一個鍵盤事件監聽器，這個監聽器響應左右箭頭鍵并使用showPage(index)函數展示對應的頁面。
這是一個非常基本的 HTML5 全屏翻頁代碼示例。當然，你可以根據自己的需求修改和擴展它，以實現更加復雜和豐富的效果。
上一篇文字放在圖片上css
下一篇文字放圖片正下方 css