1

我正在构建一个效果类似于 FlipBoard 的 Web 应用程序。

起初，我试图使用这个开源. 但我不太喜欢它的实现方式（为每个页面创建副本并在旋转时相互重叠）......另外，当我在每个页面内添加动态内容时，翻转效果变得非常不稳定......

所以现在我正在用 css 和 javascript 实现我自己的翻转效果..

页面结构是这样的

<div class="page" id="page1">
    <div class="inner"></div>
</div>
<div class="page" id="page2">
    <div class="inner"></div>
</div>

当触发翻转时......我做了以下......但我发现它并不优雅，因为它应该是平滑的 180 旋转而不是将动作分成两部分......我遇到的问题是 z-index..旋转-90度后，我希望“后”页面显示在顶部，否则它将始终是“前”侧......

    var front = '<div class="front" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page2').children('.megafolio-container').html() + '</div>';
    var back = '<div class="back megafolio-container" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page3').children('.megafolio-container').html() + '</div>';
    var middle = '<div class="middle page"></div>';
    $('.container').append(middle);
    $('.middle').html(front + back);
    $('.middle').height($(window).height());
    $('.middle').width($(window).width());
    $('.middle').css('-webkit-transform', 'rotateY(-90deg)');
    $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
    setTimeout(function(){
        $('.middle > .back').css('z-index', 10);
        $('.middle').css('-webkit-transform', 'rotateY(-180deg)');
        $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear');
    }, 500);
4

1 回答 1

1

试试这个“ Turnjs ”，它是一个简单的 Javascript API，可以实现翻页效果：

Turnjs

它非常易于使用，网站中给出的一个简单示例是：

<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>


<script type="text/javascript">
    $("#flipbook").turn({
        width: 400,
        height: 300,
        autoCenter: true
    });
</script>
于 2015-03-04T19:23:13.470 回答