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 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
Javascript让DEDECMS告别手写Tag
Sep 01 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
微信小程序实现左滑修改、删除功能
Oct 19 Javascript
validform表单验证的实现方法
Mar 08 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JS正则表达式常见用法实例详解
2018/06/19 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
COS美国官网:知名服装品牌
2019/04/08 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
法务专员岗位职责
2014/01/02 职场文书
文明城市标语
2014/06/16 职场文书
鸟的天堂导游词
2015/01/31 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书