zoukankan      html  css  js  c++  java
  • 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更新
  • 相关阅读:
    常用的系统存储过程
    考勤信息(员工打卡)
    项目经理评分(评价)
    体验套餐管理系统
    C#中简单的继承和多态
    面向对象的七个设计原则
    office 2010 安装时出错 MSXML版本6.10.1129.0
    phpstorm + Xdebug断点调试PHP
    wamp server 3.0.0 修改默认浏览器,软件语言和配置文件编辑器
    vue.js指令v-model实现方法
  • 原文地址:https://www.cnblogs.com/jalenFish/p/14099103.html
Copyright © 2011-2022 走看看