這篇文章主要介紹了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
