0

こんにちは、ウィンドウとほぼ同じサイズの複数の div を含む 1 ページの Web サイトを作成しようとしています。Web サイトには、ページ上の各 div を参照するメニューがあります。ユーザーが対応する div へのメニュー リンクの 1 つをクリックします。

http://www.nistralexandru.comule.com/div.jpg

ユーザーがリンクをクリックすると、このサイトのような div にアニメーション化するウィンドウが必要です。

http://shahkaarshah.com/

これどうやってするの？

4

2 に答える 2

2

アコーディオンのようなものを意味しているのでしょうか？ http://jqueryui.com/demos/accordion/

jquery には使いやすいアコーディオン プラグインがたくさんあるので、ゼロからコーディングするよりも、複雑なアニメーションに使用する方が簡単かもしれません。

あなたの追加情報に基づいて、このようなグリッド アコーディオンでしょうか? http://css-tricks.com/examples/InfoGrid/

于 2012-08-10T17:33:46.693 に答える
2

リンク先のサイトは Flash で構築されているため、JavaScript を使用してさまざまなページ要素のアニメーションを複製するのはそれほど難しいことではありませんが、それを行うための簡単な「万能」機能は実際にはありません。

これが通常どのように行われるかの簡単な例です:

ある種の HTML 構造を構築します。

​<div id="site">
    <div id="main" class="page">
        <ul>
            <li><a href="#page1">Page 1</a></li>
            <li><a href="#page2">Page 2</a></li>
            <li><a href="#page3">Page 3</a></li>            
            <li><a href="#page4">Page 4</a></li>
            <li><a href="#page5">Page 5</a></li>
        </ul>
    </div>
    <div id="page1" class="page"><a href="#main">Back</a></div>
    <div id="page2" class="page"><a href="#main">Back</a></div>
    <div id="page3" class="page"><a href="#main">Back</a></div>
    <div id="page4" class="page"><a href="#main">Back</a></div>
    <div id="page5" class="page"><a href="#main">Back</a></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

少しの JavaScript を使用して、ビューポートの周りでアニメーション化します。

$('.page a').on('click', function(e) {
    e.preventDefault();
    var href = $(this).attr('href'),
        top = $(href).css('top'),
        left = $(href).css('left');
    $("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});

ここにフィドルがあります

于 2012-08-10T18:00:34.110 に答える