javascript移动端 电子书 翻页效果
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移动端 电子书 翻页效果的更多相关文章
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
- Android电子书翻页效果实现
这篇文章是在参考了别人的博客基础上,修改了其中一个翻页bug,并且加了详细注释 先看效果 其中使用了贝赛尔曲线原理,关于贝赛尔曲线的知识,推荐大家看下http://blog.csdn.net/hmg2 ...
- javascript 小清新颜色翻页效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5开发的翻页效果实例
简介2010年F-i.com和Google Chrome团队合力致力于主题为<20 Things I Learned about Browsers and the Web>(www.20t ...
- c#翻页效果
用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...
- ajax翻页效果模仿yii框架
ajax翻页效果,模仿yii框架. 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>ajax分页_w ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- Android 实现书籍翻页效果----完结篇
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前由于种种琐事,暂停了这个翻页效果的实现,终于在这周末完成了大部分功能,但是这里只是给出了一个基本的雏形,没有添 ...
- Android 实现书籍翻页效果----升级篇
自从之前发布了<Android 实现书籍翻页效果----完结篇 >之后,收到了很多朋友给我留言,前段时间由于事情较多,博客写得太匆忙很多细节地方没有描述清楚.所以不少人对其中的地方有不少不 ...
随机推荐
- Vue进阶(Bus/作用域slot/动态组件)
一.Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 我们在之前已经知道了父子传值.父组件传递过来了的值,在子组件通过props接受,然后就可以使用了. 也学过了隔代传值,均是通过pro ...
- Go by Example-Switch分支结构
上一节提到了Go语言中的if/else结构,但是条件过多的时候就不适合用if语句了,这个时候我们就可以使用switch语句了. 基本特性 switch 是一个条件语句,用于将一个表达式的求值结果与可能 ...
- GDB使用——pwn相关
目录 寄存器 内存 peda插件命令 x命令详解 后续补充 内容来源 寄存器 1.查看寄存器 2.查看所有寄存器 3.查看某个寄存器 4.修改寄存器的值 内存 1.修改内存值 2.搜索内存 peda插 ...
- git前期准备
git小结 设置用户名 git config –global user.name 'itcast' 设置用户名邮箱 git config –global user.email 'itcast' 查看设 ...
- Intel AI Cloud 使用
1.申请AI Cloud A ‘training-ready’ hardware like Amazon® EC2, Intel® AI DevCloud, or a GPU-based system ...
- SVG-变换
transform变换 translate平移 <svg width="200" height="50"> <rect x="0&q ...
- 小数组的读写和带Buffer的读写哪个快
定义小数组如果是8192个字节大小和Buffered比较的话 定义小数组会略胜一筹,因为读和写操作的是同一个数组 而Buffered操作的是两个数组
- 机器学习 - 算法 - SVM 支持向量机
SVM 原理引入 支持向量机( SVM,Support Vector Machine ) 背景 2012年前较为火热, 但是在12年后被神经网络逼宫, 由于应用场景以及应用算法的不同, SVM还是需要 ...
- OSG 遍历fbx节点
count:560 construction_worker 4294967295 osg::MatrixTransform1 Bip001 L Finger02 4294967295 osg::Mat ...
- MERN——MongoDB && React && Node && Express
原文链接:Let’s build a full stack MongoDB, React, Node and Express (MERN) app github源码地址:jelorivera08/re ...