体验效果：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><a href="http://hovertree.com/" target="_blank">首页</a>

    <a href="http://hovertree.com/texiao/" target="_blank" >特效</a> <a href="http://hovertree.com/h/bjaf/dianzishu.htm" target="_blank">原文</a></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>

转自：http://hovertree.com/h/bjaf/dianzishu.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

HTML5翻页电子书的更多相关文章

  1. 简单做出HTML5翻页效果文字特效

    之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也挺简单的,主要利用了CSS3的transfor ...

  2. 6个超炫酷的HTML5电子书翻页动画

    相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...

  3. HTML5开发的翻页效果实例

    简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...

  4. Android电子书翻页效果实现

    这篇文章是在参考了别人的博客基础上,修改了其中一个翻页bug,并且加了详细注释 先看效果 其中使用了贝赛尔曲线原理,关于贝赛尔曲线的知识,推荐大家看下http://blog.csdn.net/hmg2 ...

  5. 创意HTML5文字特效 类似翻页的效果

    原文:创意HTML5文字特效 类似翻页的效果 之前在网上看到一款比较有新意的HTML5文字特效,文字效果是当鼠标滑过是出现翻开折叠的效果,类似书本翻页.于是我兴致勃勃的点开源码看了一下,发现其实实现也 ...

  6. 基于HTML5手机上下滑动翻页特效

    基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="u-al ...

  7. HTML5 book响应式翻页效果

    翻页,HTML5源码下载,HTML5响应式翻页效果,鼠标移到右上角会看到翻页效果,需要鼠标拖动后翻页,支持ie9+,html5浏览器. 单页和双页. 自动播放和暂停. 点击左右翻页. 鼠标点击左右页面 ...

  8. webapp应用--模拟电子书翻页效果

    前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...

  9. javascript移动端 电子书 翻页效果

    1.后端给一长串的纯文本 2.前端根据屏幕的高度,将文本切割为 n 页 3.使用插件 turn.js 将切割好的每页,加上翻书效果 <!DOCTYPE html> <html lan ...

随机推荐

  1. IIS Community Newsletter June 2013

    Announcements Windows 2012 Server R2 preview released Windows Server 2012 R2 provides a wide range o ...

  2. Lesson 1 A private conversation

    Text Last week I went to the theatre. I had a very good seat. The play was very intersting. I did no ...

  3. JavaScript学习笔记之数值

    JavaScript内部,所有数字都是以64位浮点数形式储存,即使整数也是如此.(整数也是通过64浮点数的形式来存储的) 所以,1+1.0=2:且1===1.0的 浮点数不是精确的值,所以涉及小数的比 ...

  4. mysql 的 VARCHAR VARCHAR2

    mysql 里面竟然没有 VARCHAR2 ??

  5. EL

  6. C语言-指针

    C指针基础知识 C语言中,指针无疑是最令人头疼的.今天无事就来学学C语言的指针,在此留下点笔记,仅供个人参考. 首先要搞懂的是,指针是什么? 指针:是用来存放内存地址的变量. 不管是什么类型的指针,存 ...

  7. 开源WinForms界面开发框架Management Studio 选项卡文档 插件 Office 2007蓝色风格 后台线程

    Management Studio是我在WinForms小项目开发过程中搭建起来的一个插件式结构的应用程序框架,因为简单灵活又容易扩展,现在将它开源供读者参考. 跑起来的效果图如下所示,具备选项卡式多 ...

  8. SQL Server中In-Flight日志究竟是多少

        在SQL Server中,利用日志的WAL来保证关系数据库的持久性,但由于硬盘的特性,不可能使得每生成一条日志,就直接向磁盘写一次,因此日志会被缓存起来,到一定数据量才会写入磁盘.这部分已经生 ...

  9. Bower : ENOGIT git is not installed or not in the PATH

    解决方法一: 添加git到window的环境变量中.设置path路径为C:\Program Files\Git\bin 解决方法二: $ set PATH=%PATH%;C:\Program File ...

  10. 从零学java--传智播客

    java的输入需要引用Scanner包 import java.util.Scanner; class ScannerDemo{ public static void main(String[] ar ...