html电子书翻页效果代码，附效果演示
html电子书翻页效果代码，附效果演示
效果演示：
一个index代码+2个js代码+1个css样式代码+图片文件夹
整体来说效果还是挺炫酷的，值得学习并且调用
其中的index代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5电子书翻页动画效果</title>
<link rel="stylesheet" type="text/css" href="css/book.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/book.js"></script>
</head>
<body>
<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> is the polar or alpine areas exist on the surface for many years and has a natural ice body along the ground motions. Ice snow for many years, after compaction, recrystallization, then freeze into ice. About 1/10 of the land area of glaciers on earth, and 4/5 of the fresh water resource is stored 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 is the floorboard of the dynamic water and static water on land surface, which belongs to dynamic water lakes, rivers, and marshes, is the most important and most direct source of water supply, the earth's ecosystem system is to maintain stable operation of the blood.
<span class="pageNumber">2</span>
</div>
<img src="img/dataImg3.png" />
</div>
<div class="bookPage runPage">
<div class="bookWord">
<span>Groundwater</span> as an important bodies of water, the earth has close relationship with human society. Groundwater storage is in the ground to form a large reservoir, with its stable water supply conditions, good water quality, become the human society of water less than nuuk.
<span class="pageNumber">3</span>
</div>
<img src="img/dataImg4.png" />
</div>
<div class="bookPage last">
<div class="bookWord">
<span>Ocean</span> is the world's most extensive water, center part of the ocean called the, edges as the sea, and communicate with each other of unified bodies of water. Contains more than one billion three hundred million and five thousand cubic kilometers of sea water, accounting for about 97% of the total water on the earth, and can be used for human consumption accounts for only 2%.
<span class="pageNumber">4</span>
</div>
</div>
</div>
</section>
<div style="text-align:center;">
<p>来源:源码之家</p>
</div>
</body>
</html>两个js代码就不赘述了，js代码不需要改动，可以将图片替换成自己的图片
大家可以点击下面的链接下载整个代码
https://yunpan.cn/cBSyyVm6PPeiQ
访问密码 7fd5
20200211更新
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017/09/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
