如何使用jQuery在加载时滑动整个页面

Question

如何使用jQuery在加载时滑动整个页面

jqueryloadslide

5

当我的页面被更改时，我希望能将整个页面向下滑动。我考虑的方法是创建一个垂直幻灯片，当链接被点击或页面加载时播放。到目前为止，我只能创建一个影响特定DIV的滑块。我还希望它能垂直滑动。非常感谢您的任何想法！

- Bridget Kilgallon

3个回答

0

看看jQuery Mobile的多页面模板。它的作用是将您的页面分成同一HTML文件中的多个DIV包装器。使用滑动转换时，您不希望它们因网络问题而显得尴尬或“挂起”，因此一般的想法是浏览器下载页面上的所有内容，并仅显示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来操作页面的样式，以隐藏第一页并显示第二页。

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

<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页面转换一样使用浏览器中的后退按钮。

- jamesmortensen

0

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

既然其他人都可以以每秒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>

- Dale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron Snyder · Accepted Answer

只需将所有内容包装在一个 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();
});