近年來，隨著移動(dòng)互聯(lián)網(wǎng)的普及，越來越多的網(wǎng)站開始注重其在移動(dòng)端的用戶體驗(yàn)。而HTML5技術(shù)的出現(xiàn)，為移動(dòng)端網(wǎng)頁的制作提供了更多的可能性，比如通過HTML5技術(shù)實(shí)現(xiàn)的手機(jī)端翻書效果，極大地增強(qiáng)了用戶的閱讀體驗(yàn)。

要想在移動(dòng)端實(shí)現(xiàn)翻書效果，需要使用到CSS3的transform屬性和HTML5的canvas標(biāo)簽。以下是一段簡(jiǎn)單的翻書效果演示代碼：

$(function(){
// 頁面當(dāng)前所處的頁碼
var currentPage = 1;
// 頁面總數(shù)
var totalPage = $(".page").length;
// 頁面寬度
var pageWidth = $(".page").width();
var pageHeight = $(".page").height();
// 翻頁的canvas
var flipCanvas = $("").appendTo($("#book")).get(0);
flipCanvas.width = pageWidth * 2;
flipCanvas.height = pageHeight * 2;
$(flipCanvas).css({
width: pageWidth + "px",
height: pageHeight + "px"
});
// 翻頁的對(duì)象
var flipBook = new FlipBook(flipCanvas, {
width: pageWidth,
height: pageHeight
});
// 對(duì)象的初始化
flipBook.init(currentPage, totalPage);
// 綁定事件
$("#prev").click(function(){
flipBook.prevPage();
});
$("#next").click(function(){
flipBook.nextPage();
});
});

通過這段代碼，我們可以看出，要想實(shí)現(xiàn)移動(dòng)端的翻書效果，首先需要獲取頁面的一些基本信息，比如頁碼、頁寬、頁高等。然后，創(chuàng)建一個(gè)canvas標(biāo)簽，把它設(shè)置為兩倍于頁面寬高的大小，并將其插入到文檔中。接下來，我們需要利用FlipBook對(duì)象實(shí)現(xiàn)翻頁效果，并綁定上一頁和下一頁按鈕的點(diǎn)擊事件。

總的來說，HTML5技術(shù)的出現(xiàn)，為移動(dòng)端網(wǎng)頁的制作提供了很多便利，通過上述代碼，我們可以很方便的為我們的移動(dòng)端網(wǎng)頁增加翻書效果。