Question

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

Answer 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();
});

Answer 2

结帐jQuery Mobile's Multi-Page Template。它的作用是将您的页面分成同一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来操纵页面的样式，以便隐藏第一页并取消隐藏第二页。

此外，上面的示例使用了淡出，因此您还需要查看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页面转换一样使用浏览器中的后退按钮。

Answer 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>

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

3 个答案: