这篇文章主要介绍了javascript移动端电子书翻页效果实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
效果
1,后端给一长串的纯文本
2,前端根据屏幕的高度,将文本切割为n页
3,使用插件。js将切割好的每页,加上翻书效果
代码
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0,最小规模=1.0,最大范围=1.0,user-scalable=不”比;
& lt; title>手机端书本翻页效果& lt;/title>
& lt;风格类型=" text/css "比;
* {
填充:0;
保证金:0;
}
超文本标记语言
身体{
高度:100%;
宽度:100%;
}
#{杂志
宽度:100%;
高度:100%;
位置:相对;
溢出:隐藏;
}
#{页面
宽度:100%;
高度:100%;
位置:相对;
z - index: 1;
}
#页div.turn-page {
背景:# fff;
}
#内容{
高度:0;
溢出:隐藏;
宽度:100%;
}
# contentText {
宽度:100%;
}/*这里是内容的样式,修改时候,一起修改*/div.turn-page # contentText {
空白:pre-wrap;
box-sizing: border-box;
填充:0 10 px;
}
#提醒{
位置:绝对的;
底部:40像素;
左:50%;
变换:translateX (-50%);
背景:rgba (0, 0, 0, 0.6);
border - radius: 4 px;
颜色:# fff;
z - index: 10;
字体大小:12 px;
填充:6 px 10 px;
显示:没有;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=霸又尽北?
& lt; div id="页面"祝辞& lt;/div>
& lt; div id=澳谌荨痹?
& lt; div id=" contentText "祝辞& lt;/div>
& lt;/div>
& lt;/div>
& lt; div id=熬洹弊４? lt;/div>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/jquery-3.3.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/turn.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
var writeStr=" "//模拟请求文本数据
$ . get ("/js/data.txt”,功能(数据){
initPage(数据);
})
函数initPage (writeStr) {
如果(! writeStr) {
返回;
}
var美元包=$(" #杂志");
var美元页面=$(" #页");
var w=$ page.width ();//窗口的宽度
h=$ var page.height ();//窗口的高度
console.log (h)
var内容=美元(“# contentText”);
美元content.html (writeStr);
var len=writeStr.length;//总长度
var cH=$ content.height ();//总高度
var pageStrNum;//每页大概有多少个字符
如果(cH比;h) {
pageStrNum=(h/cH) *兰;//每页大概有多少个字符
var obj=overflowhiddenTow($内容writeStr h);
美元page.append (' & lt; div> ' + obj.curr + & lt;/div>);
而(obj。下一个,,obj.next。长度比;0){
obj=overflowhiddenTow($内容obj.next h);
美元page.append (' & lt; div> ' + obj.curr + & lt;/div>);
}
其他}{
返回;
}//文字切割算法
函数overflowhiddenTow(美元文本,str) {
喉咙var=pageStrNum;
var tempstr=str.substring(0,喉咙);
var len=str.length;
美元texts.html (tempstr);//取的字节较少,应该增加
而($ texts.height () & lt;在,,喉咙& lt;len) {
喉咙=喉咙+ 2;
tempstr=str.substring(0,喉咙);
美元texts.html (tempstr);
}//取的字节较多,应该减少
而(texts.height美元()在在,,喉咙比;0){
喉咙喉咙=- 2;
tempstr=str.substring(0,喉咙);
美元texts.html (tempstr);
}
返回{
咕咕叫:str.substring(0,喉咙),
下一个:str.substring(喉咙)
}
}
美元page.turn ({
宽度:w,
高度:h,
海拔:50,
显示:“单”,
梯度:没错,
autoCenter:没错,
当:{
开始:函数(){},
转:函数(e,页面视图){},
转:函数(e,页面视图){
}
}
}）;
var moveObj=零;
var endObj=零;
函数getPoint (e) {
var obj=e;
如果(e。targetTouches,,e.targetTouches。长度比;0){
obj=e.targetTouches [0];
}
返回obj;
}
用美元。(“touchstart mousedown”功能(e) {
var obj=getPoint (e);
moveObj={
x: obj.clientX
};
}）;
用美元。(“touchmove mousemove”功能(e) {
var obj=getPoint (e);
endObj={
x: obj.clientX
};
}）;
用美元。(“touchend mouseup”功能(e) {
如果(moveObj,,endObj) {
var mis=endObj。x - moveObj.x;
如果(Math.abs (mis)的在30){
var pageCount=$ page.turn(“页面”);//总页数
var currentPage=$ page.turn(“页面”);//当前页
如果(mis祝辞0){
如果当前页的在1){
美元的页面。(“页面”,当前页- 1);
其他}{
console.log(“已经是第一页”)
showAlert(“已经是第一页”);
}
其他}{
如果(当前页& lt;pageCount) {
美元的页面。(“页面”,当前页+ 1);
其他}{
console.log(“最后一页”);
showAlert(“已经是最后一页”);
}
}
}
}
moveObj=零;
endObj=零;
}）;
var警告美元=$(" #警戒”);
var计时器=零;
函数showAlert(味精){
clearTimeout(计时器);
美元alert.text(味精);
美元alert.fadeIn ();
计时器=setTimeout(函数(){
美元alert.fadeOut ();
}, 1000)
}
}
& lt;/script>
& lt;/body>
& lt;/html>
