j查询页面转换

jQuery page transitions

本文关键字：转换 查询      更新时间：2023-09-26

我有以下内容 

<body>
    <div class="sidebar"></div>
    <div class="main">
        <div class="page-1">
            <p>Page 1</p>
            <button id="btn-page2">Go to Page 2</button>
        </div>
        <!-- Other Pages --> 
        <div class="page-2">
            <p>Page 2</p>
        </div>
    </div>

</body>

我试图遵循与JQuery移动相同的原则，将所有页面放在一个HTML文档中。

在页面加载时，只应显示具有类 page-1 的div。但是，在单击ID 为 btn-page2 的按钮时，应显示第二页而不是第一页。

我想我可以在可见页面上添加一个 .active-page 类，并将 display：block 作为属性。

但是，我也想从底部平滑地滑动第二页。

有什么建议吗？

你可以看看这个博客。

http://mindfiremobile.wordpress.com/2013/07/16/smooth-page-transition-on-mobile-devices-within-single-html-page/

这演示了使用 css3 添加幻灯片页面效果的方法。

您可以使用相同的概念使页面幻灯片窗体从下到上。

您可以创建一个 CSS3 类，该类将从底部滑动任何页面，并根据单击的按钮将其添加到页面div

相关文章：