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

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

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

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>手机端书本翻页效果</title>

		<style type="text/css">

			* {

				padding: 0;

				margin: 0;

			}

			html,

			body {

				height: 100%;

				width: 100%;

			}

			#magazine {

				width: 100%;

				height: 100%;

				position: relative;

				overflow: hidden;

			}

			#pages {

				width: 100%;

				height: 100%;

				position: relative;

				z-index: 1;

			}

			#pages div.turn-page{

				background: #fff;

			}

			#content{

				height: 0;

				overflow: hidden;

				width: 100%;

			}

			#contentText{

				width: 100%;

			}

			/* 这里是内容的样式,修改时候,一起修改 */

			div.turn-page,#contentText{

				white-space: pre-wrap;

				box-sizing: border-box;

				padding: 0 10px;

			}

			#alert{

				position: absolute;

				bottom: 40px;

				left: 50%;

				transform: translateX(-50%);

				background: rgba(0,0,0,0.6);

				border-radius: 4px;

				color: #fff;

				z-index: 10;

				font-size: 12px;

				padding: 6px 10px;

				display: none;

			}

		</style>

	</head>

	<body>

		<div id="magazine">

			<div id="pages"></div>

			<div id="content">

				<div id="contentText"></div>

			</div>

		</div>

		<div id="alert"></div>

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

		<script type="text/javascript" src="js/turn.js"></script>

		<script type="text/javascript">

			var writeStr = ""

			//模拟请求文本数据

			$.get("./js/data.txt",function(data){

				initPage(data);

			})

			function initPage(writeStr){

				if(!writeStr){

					return ;

				}

				var $wrap = $("#magazine");

				var $page = $("#pages");

				var w =$page.width(); //窗口的宽度

				var h = $page.height(); //窗口的高度

				console.log(h)

				var $content = $("#contentText");

				$content.html(writeStr);

				var len = writeStr.length; //总长度

				var cH = $content.height(); //总高度

				var pageStrNum; //每页大概有多少个字符

				if(cH > h){

					pageStrNum = (h  / cH )*len; //每页大概有多少个字符

					var obj = overflowhiddenTow($content,writeStr,h);

					$page.append('<div>'+obj.curr+'</div>');

					while(obj.next && obj.next.length > 0){

						obj = overflowhiddenTow($content, obj.next,h);

						$page.append('<div>'+obj.curr+'</div>');

					}

				}else{

					return ;

				}

				//文字切割算法

				function overflowhiddenTow($texts, str , at) {

					var throat = pageStrNum;

					var tempstr = str.substring(0, throat);

					var len = str.length;

					$texts.html(tempstr);

					//取的字节较少,应该增加

					while ($texts.height() < at && throat < len) {

						throat = throat + 2;

						tempstr = str.substring(0, throat);

						$texts.html(tempstr);

					}

					//取的字节较多,应该减少

					while ($texts.height() > at && throat > 0) {

						throat = throat - 2;

						tempstr = str.substring(0, throat);

						$texts.html(tempstr);

					}

					return {

						curr:str.substring(0,throat),

						next:str.substring(throat)

					}

				}

				$page.turn({

					width: w,

					height: h,

					elevation: 50,

					display: 'single',

					gradients: true,

					autoCenter: true,

					when: {

						start: function() {},

						turning: function(e, page, view) {},

						turned: function(e, page, view) {

						}

					}

				});

				var moveObj = null;

				var endObj = null;

				function getPoint(e) {

					var obj = e;

					if (e.targetTouches && e.targetTouches.length > 0) {

						obj = e.targetTouches[0];

					}

					return obj;

				}

				$wrap.on("touchstart mousedown", function(e) {

					var obj = getPoint(e);

					moveObj = {

						x: obj.clientX

					};

				});

				$wrap.on("touchmove mousemove", function(e) {

					var obj = getPoint(e);

					endObj = {

						x: obj.clientX

					};

				});

				$wrap.on("touchend mouseup", function(e) {

					if (moveObj && endObj) {

						var mis = endObj.x - moveObj.x;

						if (Math.abs(mis) > 30) {

							var pageCount = $page.turn("pages"); //总页数

							var currentPage = $page.turn("page"); //当前页

							if (mis > 0) {

								if (currentPage > 1) {

									$page.turn('page', currentPage - 1);

								} else {

									console.log("已经是第一页")

									showAlert('已经是第一页');

								}

							} else {

								if (currentPage < pageCount) {

									$page.turn('page', currentPage + 1);

								} else {

									console.log("最后一页");

									showAlert('已经是最后一页');

								}

							}

						}

					}

					moveObj = null;

					endObj = null;

				});

				var $alert = $("#alert");

				var timer = null;

				function showAlert(msg){

					clearTimeout(timer);

					$alert.text(msg);

					$alert.fadeIn();

					timer = setTimeout(function(){

						$alert.fadeOut();

					},1000)

				}

			}

		</script>

	</body>

</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. 用vs2017对C#代码进行单元测试

    1.打开vs2017->工具->扩展与更新->联机 进行搜索Unit,截图如下: 创建C#项目: 将测试代码复制到里边,这里用到的是老师课上给的实验代码: public class ...

  2. MySQL 中视图和表的区别以及联系是什么？

    两者的区别: (1)视图是已经编译好的 SQL 语句,是基于 SQL 语句的结果集的可视化的表,而表不是. (2)视图没有实际的物理记录,而基本表有. (3)表是内容,视图是窗口. (4)表占用物理空 ...

  3. File contains parsing errors: file:///etc/yum.repos.d/docker-ce.repo [line 84]: docker-ce-nightly-source]

      错误:File contains parsing errors: file:///etc/yum.repos.d/docker-ce.repo     [line 84]: docker-ce-n ...

  4. PM2用法简介【命令行启动 --env 参数设置使用问题】

    环境切换 正式开发中分为不同的环境(开发环境.测试环境.生产环境),我们需要根据不同的情景来切换各种环境 pm2通过在配置文件中通过env_xx来声明不同环境的配置,然后在启动应用时,通过--env参 ...

  5. vuecli3集成easyui

    思路是这样的,首先要将jquery设置成全局,然后就可以正常使用easyUI了. jquery安装命令: npm install --save jquery jquery-easyui安装命令: np ...

  6. win10下安装Kafka

    去kafka官网(http://kafka.apache.org/downloads.html)下最新包(目前是2.3.0),不分操作系统,直接点二进制压缩包链接跳过去下载即可 -> 解压到你指 ...

  7. ideal配置使用Git

    1.git简介 git是目前流行的分布式版本管理系统.它拥有两套版本库,本地库和远程库,在不进行合并和删除之类的操作时这两套版本库互不影响.也因此其近乎所有的操作都是本地执行,所以在断网的情况下任然可 ...

  8. Linux (Ubuntu)安装ssh

    看ssh服务是否启动 打开"终端窗口",输入sudo ps -e |grep ssh 回车有sshd,说明ssh服务已经启动, 如果没有启动,输入sudo service ssh ...

  9. 【用户体验度量】用户费力度评分（CES）

    http://www.woshipm.com/operate/2819882.html CES这个评分方式有点意思. 相关文章: http://www.woshipm.com/pd/856291.ht ...

  10. JavaScript this指向问题

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定,this最终指向调用它的对象. 1.函数调用模式: 当一个函数并非一个对象的属性时,那么它就是被当做函数来调用的.在此种模式下, ...