jQuery炫酷的HTML5翻页动画效果

使用方法：

引入css样式文件

<link rel="stylesheet" type="text/css" href="css/book.css">

引入jQuery库文件、特效JS文件

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/book.js"></script>

HTML结构

<section id="knowledge" class="viewBlock">
    <div class="bookBox">
        <a class="lastBtn"><</a>
        <a class="nextBtn">></a>
        <div class="bookPage frist">
            <img src="img/dataImg1.png" />
        </div>
        <div class="bookPage runPage">
            <div class="bookWord">
                <span>Glacier</span> red in the glacier.
                <span class="pageNumber">1</span>
            </div>
            <img src="img/dataImg2.png" />	
        </div>
        <div class="bookPage runPage">
            <div class="bookWord">				
                <span>Surface</span>  water supply, the .
                <span class="pageNumber">2</span>
            </div>
            <img src="img/dataImg3.png" />
        </div>
        <div class="bookPage runPage">
            <div class="bookWord">
                <span>Groundwater</span>itions, good .
                <span class="pageNumber">3</span>
            </div>
            <img src="img/dataImg4.png" />
        </div>
        <div class="bookPage last">
            <div class="bookWord">
                <span>Ocean</span>nts for only 2%.</span>
                <span class="pageNumber">4</span>
            </div>
        </div>
    </div>
</section>