gpt4 book ai didi

javascript - CSS 翻页效果

转载 作者:行者123 更新时间:2023-11-28 18:07:19 26 4
gpt4 key购买 nike

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

起初,我尝试使用 this open source .但我不太喜欢它的实现方式(为每个页面创建副本并在旋转时相互重叠)...另外,当我在每个页面中添加动态内容时,翻转效果变得非常不稳定...

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

页面结构是这样的

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

当翻转被触发时......我做了以下......但我发现它并不优雅,因为它应该是一个平滑的 180 度旋转而不是将 Action 分成两部分......我遇到的问题是 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);

最佳答案

试试这个“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>

关于javascript - CSS 翻页效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19361541/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com