javascript移动端 电子书 翻页效果实现代码


Posted in Javascript onSeptember 07, 2019

这篇文章主要介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
JS自定义滚动条效果
Mar 13 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 #Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 #Javascript
javascript的惯性运动实现代码实例
Sep 07 #Javascript
vue的滚动条插件实现代码
Sep 07 #Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 #Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 #Javascript
You might like
PHP 地址栏信息的获取代码
2009/01/07 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python 实现多线程下载视频的代码
2019/11/15 Python
深入浅析python变量加逗号,的含义
2020/02/22 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
python实现简单猜单词游戏
2020/12/24 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
业务总经理岗位职责
2014/02/03 职场文书
学生个人自我鉴定
2014/03/26 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
田径运动会广播稿
2015/08/19 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers