javascript移动端 电子书 翻页效果实现代码 |
您所在的位置：网站首页 › 蔺个字怎么读组词是什么意思 › javascript移动端 电子书 翻页效果实现代码 |
javascript移动端 电子书 翻页效果实现代码
|
这篇文章主要介绍了javascript移动端 电子书 翻页效果实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果
1、后端给一长串的纯文本 2、前端根据屏幕的高度，将文本切割为 n 页 3、使用插件 turn.js 将切割好的每页，加上翻书效果 代码 手机端书本翻页效果 * { 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; } 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(''+obj.curr+''); while(obj.next && obj.next.length > 0){ obj = overflowhiddenTow($content, obj.next,h); $page.append(''+obj.curr+''); } }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) } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 您可能感兴趣的文章:jsp实现上一页下一页翻页功能(示例代码)JavaScript中transform实现数字翻页效果JavaScript实现翻页功能(附效果图)基于Vuejs框架实现翻页组件移动端翻页插件dropload.js（支持Zepto和jQuery）Js实现网页键盘控制翻页的方法js实现翻页后保持checkbox选中状态的实现方法一个JS翻页效果 |
【本文地址】
今日新闻 |
推荐新闻 |