5

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

4

3 回答 3

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();
});
于 2012-04-15T22:05:09.997 回答
0

查看jQuery Mobile 的多页模板。它的作用是将您的页面分成多个 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 页面转换一样。

于 2012-04-15T22:08:12.087 回答
0

我发现这很有趣，并尝试了一下。

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

测试.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>
于 2012-04-15T22:10:41.023 回答