體驗效果：http://hovertree.com/texiao/jquery/60/
圖片請用正方形的
參考：http://hovertree.com/h/bjaf/d339euw9.htm
http://hovertree.com/texiao/jquery/48/
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery翻頁電子書 - 何問起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/60/css/book.css">
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/60/js/book.js"></script>
</head>
<body>
<div class="hovertreetitle"><h1>jQuery翻頁電子書</h1></div>
<section id="knowledge" class="viewBlock">
<div class="bookBox">
<a class="lastBtn"><</a>
<a class="nextBtn">></a>
<div class="bookPage frist">
<img src="http://hovertree.com/texiao/jquery/60/img/dataImg1.png" />
</div>
<div class="bookPage runPage">
<div class="bookWord">
<span>《雪山飛狐》</span>
在金庸作品中屬中乘之作。但在整體結構和場景設計上，表現出作者高超的才華。
作品正面敘述的情節只發生於一日之內，而向讀者介紹的故事背景卻橫跨百余年，整體結構在這種處理之下，異常緊湊。作品中每一個景象都異常壯闊優美險峻，無論是空寂雪山裡的羽箭射雁，還是拔地而起的玉筆峰上的山莊，無不為作品的英雄群像起到很好的襯托作用。
<span class="pageNumber">1</span>
</div>
<img src="http://hovertree.com/texiao/jquery/60/img/dataImg2.png" />
</div>
<div class="bookPage runPage">
<div class="bookWord">
<span> 鄱陽湖</span>
地處江西省的北部，長江中下游南岸。鄱陽湖以松門山為界，分為南北兩部分，北面為入江水道，長40公裡，寬3至5公裡，最窄處約2.8公裡；南面為主湖體，長133公裡，最寬處達74公裡。
鄱陽湖是世界上最大的鳥類保護區，“鄱陽湖畔鳥天堂，鹬鹳低飛鶴鹭翔；野鴨尋魚鷗擊水，叢叢蘆葦雁鹄藏”，每年秋末冬初，有成千上萬只候鳥，從俄羅斯西伯利亞、蒙古、日本、朝鮮以及中國東北、西北等地來此越冬。(圖文不相關)
<span class="pageNumber">2</span>
</div>
<img src="http://hovertree.com/hvtimg/bjafjd/njhmpefj.jpg" />
</div>
<div class="bookPage runPage">
<div class="bookWord">
<span>孫悟空</span>
是中國著名的神話角色之一，出自四大名著之《西游記》。相傳他由開天辟地以來的仙石孕育而生，因帶領<a href="http://hoverteee.com">群猴</a>進入水簾洞而成為眾猴之王，號稱為 “美猴王”。後來在西牛賀洲拜菩提祖師為師學藝，得名孫悟空，學會地煞七十二變 、筋斗雲等高超的法術。
神通初成的孫悟空先後大鬧地府與天宮，後被天界招安，封為弼馬溫。因感覺職位低而返回花果山自封為齊天大聖並迫使天庭承認該封號。
<span class="pageNumber">3</span>
</div>
<img src="http://hovertree.com/hvtimg/bjafjd/btl1cbfc.gif" />
</div>
<div class="bookPage last">
<div class="bookWord">
<span>梅花三弄</span>
紅塵自有癡情者
莫笑癡情太癡狂
若非一番寒澈骨
那得梅花撲鼻香
<a href="http://hovertree.com">問</a>世間情為何物
只教人生死相許
看人間多少故事
最消魂梅花三弄
梅花一弄 斷人腸
梅花二弄 費思量
梅花三弄 風波起
雲煙深處 水茫茫
紅塵自有癡情者
莫笑癡情太癡狂
若非一番寒澈骨
那得梅花撲鼻香
問世間情為何物
只教人生死相許
看人間多少故事
最消魂梅花三弄
問世間情為何物
只教人生死相許
看人間多少故事
最消魂梅花三弄
<span class="pageNumber">4</span>
</div>
</div>
</div>
</section>
</body>
</html>