如何使用 jquery 在加载时滑动整个页面答案

【问题标题】：How to slide an entire page on load with jquery如何使用 jquery 在加载时滑动整个页面
【发布时间】：2012-04-27 08:00:09
【问题描述】：

我想在页面发生更改时向下滑动整个页面。我在想这样做的方法是创建一个垂直幻灯片，在单击链接时播放并在页面加载时再次播放？到目前为止，我只能创建影响特定 DIV 的幻灯片。我也希望它垂直滑入。任何想法将不胜感激！

【问题讨论】：

标签： jquery load slide

【解决方案1】：

只需将所有内容包装在一个 div 中并向下滑动即可。

CSS

#bodyContent {
   display:none;
   height: 100%;
}

HTML

<div id="bodyContent">
    //all your stuff goes in here
</div>

Javascript/JQuery

$(document).ready(function(){
   $('#bodyContent').slideDown();
});

【讨论】：

完美！我想我还想在单击新页面的链接时使页面向上滑动。这是我得到的： $("a.switchpage").click(function(e) { e.preventDefault(); linkLocation = this.href; $("#container").slideUp(1000, redirectPage ); 但是这会导致页面完全停止加载。我可能将它放在代码中的错误位置。我对此很陌生。
@BridgetKilgallon 它的 preventDefault() 部分，即“导致页面停止加载”，如果您只想恢复，只需在函数的右大括号前添加“return true”。

【解决方案2】：

查看jQuery Mobile's Multi-Page Template。它的作用是将您的页面分成多个 DIV 包装器在同一个 HTML 文件中。使用幻灯片过渡，您不希望它们因为网络问题而显得笨拙或“挂起”，因此总体思路是浏览器将所有内容下载到页面并仅显示 DOM 的相关部分。

<div data-role="page" id="one">
    <!-- page 1 content -->

    <!-- Link to Page 2 -->
    <p><a href="#two" data-role="button">Show page "two"</a></p>
</div>

<div data-role="page" id="two">
    <!-- page 2 content -->

    <!-- Link back to Page 1 -->
    <p><a href="#one" data-direction="reverse" 
      data-role="button" data-theme="b">Back to page "one"</a></p>  

</div>

一旦您的用户转换到另一个页面，您只需使用 JavaScript 和 CSS 来操作页面的样式，使其隐藏第一个页面并取消隐藏第二个页面。

此外，上面的示例使用了淡出，因此您还需要查看Page Transitions 页面才能将其更改为使用向下滑动效果。

<a href="page-transitions-page.html" data-role="button" data-transition="slidedown" 
  data-inline="true" data-corners="true" data-shadow="true" 
  data-iconshadow="true" 
  data-wrapperels="span" data-theme="c" 
  class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">page</span>
    </span>
</a>

此外，它使用 HTML5，主要针对移动平台。不过，我已经看到这个库在桌面上也很好玩。

使用这个库的最大优点是它更可能与其他浏览器交叉兼容，并且它还使用技术来管理转换状态。换句话说，您的用户可以像使用普通的 Web 1.0 页面转换一样使用浏览器中的后退按钮。

【讨论】：

【解决方案3】：

我觉得这很有趣，并尝试了一下。

由于其他人每秒可以输入 50000 个单词，因此类似于建议将内容包装在 div 中的答案:)

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Slide Test</title>
    </head>
    <body>
        <div class="container">
            <a href="test.html" class="slide_page">Link Text</a>
            <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
            <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
        </div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(function(){
            // hide the div on page load and use a slidedown effect
            $('div.container').fadeOut(0, function(){
                $(this).slideDown(500);
            });
            // capture link clicks and slide up then go to the links href attribute
            $('a.slide_page').click(function(e){
                e.preventDefault();
                var $href = $(this).attr('href');
                $('div.container').slideUp(500, function(){
                    window.location = $href;
                });
            });

        });
    </script>
</html>

【讨论】：