体验效果：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. Python黑帽编程 3.5 DTP攻击

    Python黑帽编程 3.5 DTP攻击 在上一节,<Python黑帽编程 3.4 跨越VLAN>中,我们讨论了一般的VLAN中实施攻击的方法,这一节属于扩展内容,简单演示下Cisco特有 ...

  2. C#学习系列-文章导航

    C#学习系列-.NET体系结构 C#学习系列-类与结构的区别 C#学习系列-String与string的区别 C#学习系列-抽象方法与虚拟方法的区别 C#学习系列-out与ref的区别 C#学习系列- ...

  3. iOS 之APP上架

    前几天在忙着上线,尽管之前已经上线过一次,但由于本身比较菜,还是状况百出. 好在今天终于成功提交,因此来写写心得. 如果是第一次上线,推荐这篇文章: http://jingyan.baidu.com/ ...

  4. PowerDesigner最基础的使用方法入门学习

    1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其他的概念知识可自行学习) 我的PowerDesigner版本是16.5的,如若版本不一样,请自行参考学习即可.(打开软件即是 ...

  5. iOS中多线程知识总结(二)

    1.GCD GCD全称是Grand Central Dispatch,译为"强大的中枢管理器" 1)什么是任务?什么是队列? 任务和队列是GCD的核心. 任务: 执行什么操作 队列 ...

  6. LoTVideo：只需两步，让HTML5原生态的Video茁壮成长

    开源地址:https://github.com/dunitian/LoTHTML5/tree/master/LoTVideo 第一步引入lotvideo.js(先确认在这个前面引入了jq包) 第二步: ...

  7. sizzle分析记录：词法分析器(tokenize)

    词法分析器(tokenize)? 词法分析器又称扫描器.词法分析是指将我们编写的文本代码流解析为一个一个的记号,分析得到的记号以供后续语法分析使用. sizzle引入了tokenize这个概念,意义? ...

  8. Atom支持Markdown和Latex

    本篇博客主要用于记录Atom编辑器同时支持markdown和latex: 1.安装 安装方法1: (Windows系统)File->Settings->Install中搜索markdown ...

  9. php语句

    判断变量的方法: 例: $a=""; var_dump(empty($a)); 输出的结果为true 若$a=10; var_dump(empty($a)); 输出falst 若没 ...

  10. 一起学微软Power BI系列-官方文档-入门指南(2)获取源数据

    我们在文章: 一起学微软Power BI系列-官方文档-入门指南(1)Power BI初步介绍中,我们介绍了官方入门文档的第一章.今天继续给大家介绍官方文档中,如何获取数据源的相关内容.虽然是英文,但 ...