HTML 5 可以實現許多有趣的效果，其中之一就是手機翻書效果。這種效果可以將一張圖片或一段文字呈現為一本翻頁的書，用戶可以通過手指滑動的方式翻閱其中的內容。下面是一段實現手機翻書效果的 HTML 代碼示例：

<div class="book">
<div class="page">
<img src="page1.jpg" alt="Page 1">
</div>
<div class="page">
<img src="page2.jpg" alt="Page 2">
</div>
<div class="page">
<img src="page3.jpg" alt="Page 3">
</div>
</div>
<script>
var book = document.querySelector('.book');
var pages = book.querySelectorAll('.page');
var currentPage = 0;
var isMoving = false;
function moveToPage(pageIndex) {
isMoving = true;
pages[currentPage].classList.remove('active');
pages[pageIndex].classList.add('active');
currentPage = pageIndex;
setTimeout(function() {
isMoving = false;
}, 500);
}
book.addEventListener('touchstart', function(e) {
if (isMoving) return;
var startX = e.touches[0].clientX;
var startY = e.touches[0].clientY;
book.addEventListener('touchmove', function(e) {
var deltaX = e.touches[0].clientX - startX;
var deltaY = e.touches[0].clientY - startY;
if (Math.abs(deltaX) >Math.abs(deltaY)) {
e.preventDefault();
if (deltaX >50 && currentPage >0) {
moveToPage(currentPage - 1);
} else if (deltaX< -50 && currentPage< pages.length - 1) {
moveToPage(currentPage + 1);
}
}
}, { passive: false });
});
pages[currentPage].classList.add('active');
</script>

上面的代碼首先定義了一個 class 為 "book" 的 div 元素，其中包含了多個 class 為 "page" 的 div 元素，每個 div 元素內部包含了一張圖片。接下來的 JavaScript 代碼實現了用戶滑動頁面時的交互效果，其中 isMoving 變量用于標記當前是否處于一個頁面滑動的過程中，moveToPage 函數用于移動到指定的頁面，touchstart 和 touchmove 事件則用于監聽用戶的手指滑動操作。