体验效果：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. 《R in Action》读书笔记（3） 数据变换

    MindMapper 原文件

  2. appledoc 使用

    1.安装 git clone git://github.com/tomaz/appledoc.git cd ./appledoc sudo sh install-appledoc.sh 2.使用 进入 ...

  3. Solr的原理及在项目中的使用实例.

    前面已经讲过 如果安装及配置Solr服务器了, 那么现在我们就来正式在代码中使用Solr.1,这里Solr主要是怎么使用的呢?  当我们在前台页面搜索商品名称关键词时, 我们这时是在Solr库中去查找 ...

  4. 当前不会命中断点。源代码与原始版本不同 (VS2012)

    遇到“当前不会命中断点.源代码与原始版本不同”的问题. 在网上查的类似: 一般studio会提示将“工具”,“选项”,“调试”,“要求源文件与原始版本完成匹配”去掉勾.但是这个配置去掉治标不治本,错误 ...

  5. iOS-常见问题

    11.21常见问题 一storyboard连线问题 产生原因:将与storyboard关联的属性删除了,但是storyboard中还保持之前所关联的属性. 解决: 点击view controller ...

  6. Newtonsoft.json中 linq to json 和序列化哪个快？

    Newtonsoft.json是最常用的json序列化组件,当然他不是最快的,但是是功能最全的.. using System; using System.Collections.Generic; us ...

  7. g++编译流程

    测试程序test.cpp如下所示: #include <iostream> using namespace std; #define MAX 9 int main() { //just f ...

  8. Android应用中实现系统“分享”接口

    在android下各种文件管理器中,我们选择一个文件,点击分享可以看到弹出一些app供我们选择,这个是android系统分享功能,我们做的app也可以出现在这个列表中. 第一步:在Manifest.x ...

  9. 关于在Linux64位下安装xampp

    网上关于这个主题的内容比较少,所以就写一下按装后的心得.之前一直在windows下用xampp,想在Linux下也体验一把,可是自己的Linux装的是64位的在XAMPP的官网上http://www. ...

  10. LTP随笔——本地调用ltp之ltp4j

    关于ltp本地调用的相关参考请见LTP的Git项目:https://github.com/HIT-SCIR 以下以/home/lion/Desktop路径为例下面教程中出现的具体路径以你实际配置的为准 ...