javascript移动端 电子书 翻页效果实现代码
程序员文章站
2023-11-03 14:25:09
这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...
这篇文章主要介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。