Бесплатная веб-страница js не работает нормально на локальном

Question

Я попробовал несколько способов скопировать книжную полку, но кажется, что моя техническая информация слишком слаба в списке в этом поле. Итак, вот страница:

turnjs.com

страница флип можно скачать бесплатно, но перед открытием книги, анимации после клика по книге, это то, что мне нужно, но я не мог. :(

Заранее спасибо за ваше время

Answer 1

Я не уверен, насколько это может быть полезно. Потому что его сложная анимация, и если вы хотите, чтобы некоторые анимации, как, что вам нужно знать, и из JS. но все-таки вы можете начать с глядя в tuenjs.com-> ViewSource -> и посмотреть на 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]); 

} 

}