kevin1220 / h5-turnjs

翻书页效果展示内容

h5-turnjs

• 翻书页效果展示内容

效果展示

-

turn.js的使用

  <script type="text/javascript">
      $(function progressbar(){
        var w = $(".graph").width();
        $(".flipbook-viewport").show();
      });
      //屏蔽ios下上下弹性
      $(window).on('scroll.elasticity', function (e) {
          e.preventDefault();
      }).on('touchmove.elasticity', function (e) {
          e.preventDefault();
      });
      function loadApp() {
          var w=$(window).width();
          var h=$(window).height();
          $('.flipboox').width(w).height(h);
          $(window).resize(function(){
              w=$(window).width();
              h=$(window).height();
              $('.flipboox').width(w).height(h);
          });
          $('.flipbook').turn({
                  // Width
                  width:w,
                  // Height
                  height:h,
                  // Elevation
                  elevation: 50,
                  display :'single',
                  // Enable gradients
                  gradients: true,
                  // Auto center this flipbook
                  autoCenter: true
          });
      }
      yepnope({
          test : Modernizr.csstransforms,
          yep: ['js/turn.js'],
          complete: loadApp
      });
  </script>