javascript移動端 電子書 翻頁效果實現(xiàn)代碼
這篇文章主要介紹了javascript移動端 電子書 翻頁效果實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
效果
1、后端給一長串的純文本
2、前端根據(jù)屏幕的高度,將文本切割為 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>手機(jī)端書本翻頁效果</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%; } /* 這里是內(nèi)容的樣式,修改時候,一起修改 */ 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 = "" //模擬請求文本數(shù)據(jù) $.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); //取的字節(jié)較少,應(yīng)該增加 while ($texts.height() < at && throat < len) { throat = throat + 2; tempstr = str.substring(0, throat); $texts.html(tempstr); } //取的字節(jié)較多,應(yīng)該減少 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"); //總頁數(shù) var currentPage = $page.turn("page"); //當(dāng)前頁 if (mis > 0) { if (currentPage > 1) { $page.turn('page', currentPage - 1); } else { console.log("已經(jīng)是第一頁") showAlert('已經(jīng)是第一頁'); } } else { if (currentPage < pageCount) { $page.turn('page', currentPage + 1); } else { console.log("最后一頁"); showAlert('已經(jīng)是最后一頁'); } } } } 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
用Javascript數(shù)組處理多個字符串的連接問題
小技巧 用Javascript數(shù)組處理多個字符串的連接問題,大家可以參考下。2009-08-08js 鼠標(biāo)拖動對象 可讓任何div實現(xiàn)拖動效果
js鼠標(biāo)拖動對象,可讓任何div實現(xiàn)拖動效果,需要的朋友可以參考下。2009-11-11Underscore之Array_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了Underscore之Array的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07javascript中字符串替換函數(shù)replace()方法與c# 、vb 替換有一點不同
JavaScript 不像和c# vb.net 中一樣 直接就可以替換所以的要替換的字符2010-06-06js動態(tài)生成form 并用ajax方式提交的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s動態(tài)生成form 并用ajax方式提交的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-09-09