Question

我尝试了几种复制书架的方法，但似乎我的技术信息在这个领域的列表中太弱了。那么，这是页面：

turnjs.com

翻页可以免费下载，但在打开书之前，点击一本书后的动画，这是我需要的，但我无法做到。：（

提前感谢您的时间

Answer 1

我不确定这可能会有多大帮助。因为它是一个复杂的动画，如果你想要一些动画，你需要知道进出js。但你仍然可以从调查开始 tuenjs.com-＆gt; viewSource - ＆gt;并查看bookshelf.js ..我采取了可能正在进行转换的部分代码。

var transitionEnd = $.cssTransitionEnd(),
    actualDemo = currentDemo,
    thumbnail = $('.shelf .sample[sample="'+currentDemo+'"]'),
    bookWidth = $('#book-zoom').width()/2,
    bookHeight = $('#book-zoom').height()/2,
    targetPosition = thumbnail.offset(),
    position = $('#book-zoom').offset(),
    scaleFrom = thumbnail.height()*1.1/$('#book-zoom').height(),
    posX = (-bookWidth + sample.flipbook.width()/4)*scaleFrom +  bookWidth + position.left,
    posY = -bookHeight*scaleFrom +  bookHeight + position.top,
    moveX = targetPosition.left - posX,
    moveY = targetPosition.top - posY,
    showBars = function(e) {

      if (currentDemo==actualDemo) {
        $('.splash').addClass('show-bar');
        if (typeof(_gaq)!='undefined')
          _gaq.push(['_trackEvent', 'Sample', currentDemo]);
      }

    };

  thumbnail.css({visibility: 'hidden'});

  $('#book-zoom').
    removeClass('animate').
    transform('translate(' + moveX + 'px, ' + moveY + 'px)'+
      'scale(' + scaleFrom + ',' + scaleFrom + ')').
    css({visibility:'visible'});

  setTimeout(function() {
    $('#book-zoom').addClass('animate').transform('');
    sample.flipbook.turn('page', sample.startPage || 2);
  }, 0);

  if (!$('.splash .details').is(':visible')) {

    showBars();

  } else {

    if (!transitionEnd || isIE()) {

      setTimeout(function(){
        showBars();
      }, 1000);

    } else {
      $('.details').bind(transitionEnd, function() {
        $(this).unbind(transitionEnd);
        //Chrome has another bug, it doesn't read new css rules after transitionEnd
        setTimeout(showBars, 0);
      });
    }
  }

} else {

  $('.splash').addClass('preview show-samples show-bar');
  sample.flipbook.turn('page', sample.startPage || 2);
  if (typeof(_gaq)!='undefined')
    _gaq.push(['_trackEvent', 'Sample', currentDemo]);

}

}

一个免费的网页js在本地工作不好

1 个答案: