1、后端给一长串的纯文本

2、前端根据屏幕的高度，将文本切割为 n 页

3、使用插件 turn.js 将切割好的每页，加上翻书效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. 		<title>手机端书本翻页效果</title>
  7. 		<style type="text/css">
  8. 			* {
  9. 				padding: 0;
  10. 				margin: 0;
  11. 			}
  12.  
  13. 			html,
  14. 			body {
  15. 				height: 100%;
  16. 				width: 100%;
  17. 			}
  18.  
  19. 			#magazine {
  20. 				width: 100%;
  21. 				height: 100%;
  22. 				position: relative;
  23. 				overflow: hidden;
  24.  
  25. 			}
  26.  
  27. 			#pages {
  28. 				width: 100%;
  29. 				height: 100%;
  30. 				position: relative;
  31. 				z-index: 1;
  32. 			}
  33. 			#pages div.turn-page{
  34. 				background: #fff;
  35. 			}
  36. 			#content{
  37. 				height: 0;
  38. 				overflow: hidden;
  39. 				width: 100%;
  40. 			}
  41. 			#contentText{
  42. 				width: 100%;
  43. 			}
  44.  
  45. 			/* 这里是内容的样式,修改时候,一起修改 */
  46. 			div.turn-page,#contentText{
  47. 				white-space: pre-wrap;
  48. 				box-sizing: border-box;
  49. 				padding: 0 10px;
  50. 			}
  51.  
  52. 			#alert{
  53. 				position: absolute;
  54. 				bottom: 40px;
  55. 				left: 50%;
  56. 				transform: translateX(-50%);
  57. 				background: rgba(0,0,0,0.6);
  58. 				border-radius: 4px;
  59. 				color: #fff;
  60. 				z-index: 10;
  61. 				font-size: 12px;
  62. 				padding: 6px 10px;
  63. 				display: none;
  64. 			}
  65. 		</style>
  66. 	</head>
  67. 	<body>
  68.  
  69. 		<div id="magazine">
  70. 			<div id="pages"></div>
  71. 			<div id="content">
  72. 				<div id="contentText"></div>
  73. 			</div>
  74. 		</div>
  75. 		<div id="alert"></div>
  76. 		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  77. 		<script type="text/javascript" src="js/turn.js"></script>
  78.  
  79. 		<script type="text/javascript">
  80. 			var writeStr = ""
  81.  
  82. 			//模拟请求文本数据
  83. 			$.get("./js/data.txt",function(data){
  84. 				initPage(data);
  85. 			})
  86.  
  87. 			function initPage(writeStr){
  88. 				if(!writeStr){
  89. 					return ;
  90. 				}
  91.  
  92. 				var $wrap = $("#magazine");
  93. 				var $page = $("#pages");
  94. 				var w =$page.width(); //窗口的宽度
  95. 				var h = $page.height(); //窗口的高度
  96. 				console.log(h)
  97. 				var $content = $("#contentText");
  98.  
  99. 				$content.html(writeStr);
  100. 				var len = writeStr.length; //总长度
  101. 				var cH = $content.height(); //总高度
  102. 				var pageStrNum; //每页大概有多少个字符
  103. 				if(cH > h){
  104. 					pageStrNum = (h  / cH )*len; //每页大概有多少个字符
  105. 					var obj = overflowhiddenTow($content,writeStr,h);
  106. 					$page.append('<div>'+obj.curr+'</div>');
  107. 					while(obj.next && obj.next.length > 0){
  108. 						obj = overflowhiddenTow($content, obj.next,h);
  109. 						$page.append('<div>'+obj.curr+'</div>');
  110. 					}
  111. 				}else{
  112. 					return ;
  113. 				}
  114.  
  115. 				//文字切割算法
  116. 				function overflowhiddenTow($texts, str , at) {
  117. 					var throat = pageStrNum;
  118. 					var tempstr = str.substring(0, throat);
  119. 					var len = str.length;
  120. 					$texts.html(tempstr);
  121. 					//取的字节较少,应该增加
  122. 					while ($texts.height() < at && throat < len) {
  123. 						throat = throat + 2;
  124. 						tempstr = str.substring(0, throat);
  125. 						$texts.html(tempstr);
  126. 					}
  127. 					//取的字节较多,应该减少
  128. 					while ($texts.height() > at && throat > 0) {
  129. 						throat = throat - 2;
  130. 						tempstr = str.substring(0, throat);
  131. 						$texts.html(tempstr);
  132. 					}
  133.  
  134. 					return {
  135. 						curr:str.substring(0,throat),
  136. 						next:str.substring(throat)
  137. 					}
  138.  
  139. 				}
  140.  
  141. 				$page.turn({
  142. 					width: w,
  143. 					height: h,
  144. 					elevation: 50,
  145. 					display: 'single',
  146. 					gradients: true,
  147. 					autoCenter: true,
  148. 					when: {
  149. 						start: function() {},
  150. 						turning: function(e, page, view) {},
  151. 						turned: function(e, page, view) {
  152.  
  153. 						}
  154. 					}
  155. 				});
  156.  
  157. 				var moveObj = null;
  158. 				var endObj = null;
  159.  
  160. 				function getPoint(e) {
  161. 					var obj = e;
  162. 					if (e.targetTouches && e.targetTouches.length > 0) {
  163. 						obj = e.targetTouches[0];
  164. 					}
  165. 					return obj;
  166. 				}
  167.  
  168. 				$wrap.on("touchstart mousedown", function(e) {
  169. 					var obj = getPoint(e);
  170. 					moveObj = {
  171. 						x: obj.clientX
  172. 					};
  173. 				});
  174. 				$wrap.on("touchmove mousemove", function(e) {
  175. 					var obj = getPoint(e);
  176. 					endObj = {
  177. 						x: obj.clientX
  178. 					};
  179. 				});
  180.  
  181. 				$wrap.on("touchend mouseup", function(e) {
  182. 					if (moveObj && endObj) {
  183. 						var mis = endObj.x - moveObj.x;
  184. 						if (Math.abs(mis) > 30) {
  185. 							var pageCount = $page.turn("pages"); //总页数
  186. 							var currentPage = $page.turn("page"); //当前页
  187. 							if (mis > 0) {
  188. 								if (currentPage > 1) {
  189. 									$page.turn('page', currentPage - 1);
  190. 								} else {
  191. 									console.log("已经是第一页")
  192. 									showAlert('已经是第一页');
  193. 								}
  194. 							} else {
  195. 								if (currentPage < pageCount) {
  196. 									$page.turn('page', currentPage + 1);
  197. 								} else {
  198. 									console.log("最后一页");
  199. 									showAlert('已经是最后一页');
  200. 								}
  201. 							}
  202.  
  203. 						}
  204.  
  205. 					}
  206. 					moveObj = null;
  207. 					endObj = null;
  208. 				});
  209.  
  210. 				var $alert = $("#alert");
  211. 				var timer = null;
  212. 				function showAlert(msg){
  213. 					clearTimeout(timer);
  214. 					$alert.text(msg);
  215. 					$alert.fadeIn();
  216. 					timer = setTimeout(function(){
  217. 						$alert.fadeOut();
  218. 					},1000)
  219. 				}
  220. 			}
  221. 		</script>
  222. 	</body>
  223. </html>

　　

javascript移动端 电子书 翻页效果的更多相关文章

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

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

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

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

  3. javascript 小清新颜色翻页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  5. c#翻页效果

    用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...

  6. ajax翻页效果模仿yii框架

    ajax翻页效果,模仿yii框架. 复制代码代码如下: <!DOCTYPE html>  <html>  <head>  <title>ajax分页_w ...

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

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

  8. Android 实现书籍翻页效果----完结篇

    By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...

  9. Android 实现书籍翻页效果----升级篇

    自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...

随机推荐

  1. oracle 导入导出功能

    关于expdp和impdp 使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. - EXPDP和IMPDP是服务端的工具程序,他 ...

  2. 什么是IO流

    先看一段百度上的解释: 当然:如果你看不懂,那么你只需要记住下面3句话. 1. (1).我们知道,每个人家里喝的水都是从自来水厂来的,自来水厂的水又是从水源地来的, (2).水是通过水管来的. (3) ...

  3. C++ STL介绍——String类

    目录 1.简介 2.string类成员函数汇总 3.String类的构造函数以及析构函数 4.获取字符串长度 5.获取字符串元素 6.字符串比较方法 7.字符串输入输出 8.字符串查找函数 1.简介 ...

  4. 配置BeautifulSoup4+lxml+html5lib

    序 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数 ...

  5. mac、windows、linux版jdk1.8下载

    链接: https://pan.baidu.com/s/1Yjs6GIxURiocq30zZ7heYQ 提取码: g6i8

  6. ios 新建app iphone 、 ipad or universal ？

    很久没有关注这个新建app的  时候 选什么的问题了, 因为我们一般在公司 都是 已经建立好的app 直接 在那上面开发. 所以很久不建立新app 遇到新的app需要你自己去创建的时候 可能就会 有突 ...

  7. nVidia GPGPU vs AMD Radeon HD Graphics执行模式对比

    大家做高性能计算的朋友,想必对CPU的执行模式已经非常熟悉了吧.当代高级些的CPU一般采用超标量流水线,使得毗邻几条相互独立的指令能够并行执行——这称为指令集并行(ILP,Instruction-Le ...

  8. Linux 验证当前 Video0 不否是v4l设备 linux v4l 编程(1) Video 4 Linux 简介

    #include <stdio.h> #include <string.h> #include <errno.h> #include <sys/types.h ...

  9. npm教程、脚手架

    使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的 ...

  10. React Native设置图片全屏背景显示

    显示效果如下: 实现和页面代码如下: 1> 使用的react-navigation隐藏导航栏: AddTopic: {screen: AddTopicScreen,navigationOptio ...