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

jQueryMobileのマルチページテンプレートを確認してください。これは、ページを同じ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を使用してページのスタイルを操作し、最初のページを非表示にし、2番目のページを再表示します。

また、上記の例ではフェードアウトを使用しているため、スライドダウン効果を使用するように変更するには、[ページの遷移]ページも確認する必要があります。

<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

私はこれが非常に興味深いと感じ、それを突き刺しました。

他の誰もが1秒間に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>
于 2012-04-15T22:10:41.023 に答える