如何在翻頁前後翻轉翻頁書本

Question

我試圖在頁面上自動翻轉翻頁書籍，以便在翻頁或翻轉時保持居中。我使用了autoCenter的flip.js文檔，以及$("#flipbook").turn("center");，但沒有任何效果。有誰知道這是否可以做到？一個工作的例子是在下面的小提琴： -

http://jsfiddle.net/kmturley/GGea5/1/

 <div class="t"> 
      <div class="tc rel"> 
       <div class="book" id="book"> 
        <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div> 
        <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div> 
         <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div> 
         <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /></div> 
         <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" /></div> 
         <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" /></div> 
       </div> 
      </div> 
     </div> 




          /* 
      * Turn.js responsive book 
      */ 

      /*globals window, document, $*/ 

      (function() { 
       'use strict'; 

       var module = { 
        ratio: 1.38, 
        init: function (id) { 
         var me = this; 

         // if older browser then don't run javascript 
         if (document.addEventListener) { 
          this.el = document.getElementById(id); 
          this.resize(); 
          this.plugins(); 

          // on window resize, update the plugin size 
          window.addEventListener('resize', function (e) { 
           var size = me.resize(); 
           $(me.el).turn('size', size.width, size.height); 
          }); 
         } 
        }, 
        resize: function() { 
         // reset the width and height to the css defaults 
         this.el.style.width = ''; 
         this.el.style.height = ''; 

         var width = this.el.clientWidth, 
          height = Math.round(width/this.ratio), 
          padded = Math.round(document.body.clientHeight * 0.9); 

         // if the height is too big for the window, constrain it 
         if (height > padded) { 
          height = padded; 
          width = Math.round(height * this.ratio); 
         } 

         // set the width and height matching the aspect ratio 
         this.el.style.width = width + 'px'; 
         this.el.style.height = height + 'px'; 

         return { 
          width: width, 
          height: height 
         }; 
        }, 
        plugins: function() { 
         // run the plugin 
         $(this.el).turn({ 
          gradients: true, 
          acceleration: true 
         }); 
         // hide the body overflow 
         document.body.className = 'hide-overflow'; 
        } 
       }; 

       module.init('book'); 
      }()); 

Answer 1

得到它的工作。我錯過了將這個自動中心放在代碼的底部： -

  plugins: function() { 
       // run the plugin 
       $(this.el).turn({ 
        gradients: true, 
        acceleration: true, 
        autoCenter: true 
       }); 
       // hide the body overflow 
       document.body.className = 'hide-overflow'; 
      }