HTML5是一個開放標準的超文本標記語言，它的特點是使用簡單的語法結構來描述文檔的結構、表現和行為。
在HTML5中，我們可以使用一些新特性來增強網頁的交互性。其中，上下翻頁效果是很常見的一種。下面是一段基于HTML5和CSS3實現的上下翻頁效果代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下翻頁效果</title>
<style>
body {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: hidden;
}
.page:nth-child(1) {
background-color: rgba(17, 48, 66, 1);
}
.page:nth-child(2) {
background-color: rgba(124, 123, 94, 1);
}
.page:nth-child(3) {
background-color: rgba(247, 231, 175, 1);
}
.page:nth-child(4) {
background-color: rgba(204, 204, 204, 1);
}
.page-active {
overflow-y: auto;
}
</style>
</head>
<body>
<div class="page page-active">
<p>第一頁</p>
</div>
<div class="page">
<p>第二頁</p>
</div>
<div class="page">
<p>第三頁</p>
</div>
<div class="page">
<p>第四頁</p>
</div>
<script>
var pages = document.querySelectorAll('.page');
var currentPageIndex = 0;
var isAnimating = false;
var pageScrollFn = function(e) {
if (isAnimating) return;
var direction = e.deltaY >0 ? 'down' : 'up';
if (direction === 'down') {
if (currentPageIndex >= pages.length - 1) return;
currentPageIndex++;
} else {
if (currentPageIndex<= 0) return;
currentPageIndex--;
}
isAnimating = true;
pages[currentPageIndex].classList.add('page-active');
pages[currentPageIndex - 1].classList.remove('page-active');
setTimeout(function() {
isAnimating = false;
}, 1000);
}
window.addEventListener('wheel', pageScrollFn);
</script>
</body>
</html>上述代碼中，我們首先定義了四個div元素，分別代表四個頁面。其中，第一個頁面被默認設置為當前活動頁面，其他頁面則會處于隱藏狀態。我們通過CSS3來設置每個頁面的背景色和一些基本樣式。此外，我們還設置了每個頁面的寬度和高度都占滿整個視口。
在代碼的末尾，我們為頁面綁定了一個鼠標滾輪事件。當用戶滾動鼠標滾輪時，判斷滾動的方向，如果是向下，則切換到下一個頁面；如果是向上，則切換到上一個頁面。我們使用一個指針變量來記錄當前活動頁面的索引，然后通過給每個頁面添加和移除page-active類來控制頁面的顯示和隱藏。
總的來說，上下翻頁效果可以為網頁增添一絲動態感，使用戶的閱讀體驗更加流暢和舒適。通過HTML5和CSS3的靈活運用，我們可以打造出各種驚艷的網頁特效。
上一篇html5上下翻動代碼
下一篇mysql5.6重設密碼