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;
      }
    
  
  
 
    
      
      
 
      
    
    
    
    
     
    
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。