体验效果：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. 仿花田：相亲网站 意中人 已在GitHub上开源

    在园友的强烈呼唤下,我还是负责任的分享给大家,因为对代码比较熟悉一下,还是有些问题要说明,不然别人看起来会比较费劲.说实话除了这个bootstrap的界面风格和这件事情本身对大家有吸引力之外,内部的逻 ...

  2. ASP.NET MVC 过滤器(一)

    ASP.NET MVC 过滤器(一) 前言 前面的篇幅中,了解到了控制器的生成的过程以及在生成的过程中的各种注入点,按照常理来说篇幅应该到了讲解控制器内部的执行过程以及模型绑定.验证这些知识了.但是呢 ...

  3. [ASP.NET MVC 大牛之路]02 - C#高级知识点概要(1) - 委托和事件

    在ASP.NET MVC 小牛之路系列中,前面用了一篇文章提了一下C#的一些知识点.照此,ASP.NET MVC 大牛之路系列也先给大家普及一下C#.NET中的高级知识点.每个知识点不太会过于详细,但 ...

  4. Spring4.X——搭建

    一,Spring概念总结 spring是一个集成了许多第三方框架的大杂烩,其核心技术是IOC(控制反转,也称依赖注入)和AOP(面向切面编程),所以spring既是一个IOC容器,也是一个AOP框架. ...

  5. 大叔最新课程～MVC核心技术剖析

    <MVC核心技术剖析介绍> 主讲:仓储大叔 时间:2016-12-04 20:30分 MVC各层分工 Http请求的过程 如何查找Action 如何渲染视图 ViewModel,DTO,D ...

  6. Sublime Text执行js

    Sublime Text执行js 在Build Sytem添加以下内容: { "cmd": ["node", "$file"], " ...

  7. SikuliX简介及安装

    一.简单介绍 SikuliIDE和Sikuli Script就是现在的SikuliX,最新版本是SikuliX1.1.0, 部分兼容Sikuli JAVA API,支持Python和Ruby,Siku ...

  8. Sublime 快捷键

    语法快捷键: 后代:> 缩写:nav>ul>li <nav> <ul> <li></li> </ul> </nav& ...

  9. 浅谈cssText

    给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...

  10. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...