html电子书翻页效果代码，附效果演示_html电子书代码

作者：Cpp五条 | 2024-02-19 22:44:28

踩

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更新

下载地址： https://wwa.lanzoui.com/i98nm6d

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/117144