体验效果：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. Entity Framework 基础知识走马观花

    本文目录: 一.EF中的edmx文件探秘 二.EF中的代理模式探秘 三.EF中的延迟加载与即时加载 一.EF中的edmx文件 1.1 emdx文件本质:一个XML文件 (1)通过选择以XML方式打开e ...

  2. Web3DGame之路，Babylonjs 和TypeScript学习笔记（二）

    先来认识一下Babylonjs,由于基于webgl来开发,所以先介绍一下基础知识. Webgl是一个html标准,他要在canvas元素上初始化. Html页面上的准备 所以我们先从html页面开始看 ...

  3. Javascript闭包和C#匿名函数对比分析

    C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...

  4. Btree 索引

    Btree 索引 索引是帮助数据库高效获取数据的一种数据结构,通过提取句子主干,就可以得到索引的本质. m-way查找树 如果想了解Btree,需要首先了解m-way数据结构. m-way查找树是是一 ...

  5. 垃圾回收机制GC知识再总结兼谈如何用好GC

    一.为什么需要GC 应用程序对资源操作,通常简单分为以下几个步骤: 1.为对应的资源分配内存 2.初始化内存 3.使用资源 4.清理资源 5.释放内存 应用程序对资源(内存使用)管理的方式,常见的一般 ...

  6. CoreProfiler/NanoProfiler性能调试监控系列总目录

    NanoProfiler - 适合生产环境的性能监控类库 之 基本功能篇 NanoProfiler - 适合生产环境的性能监控类库 之 大数据篇 NanoProfiler - 适合生产环境的性能监控类 ...

  7. test markdown

    Markdown和Haroopad介绍文档 [TOC "float:right"] 什么是Markdown Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John ...

  8. WPF 后台读取样式文件

    ResourceDictionary dic = new ResourceDictionary { Source = new Uri("Styles.xaml",UriKind.R ...

  9. 一张图理解prototype、proto和constructor的三角关系

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则 ...

  10. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...