0

このように機能するものを作成しようとしていますが、サブメニューはありません。ナビゲーション アイテムをクリックすると、背景画像が変化し、コンテンツがこのようにスライドして表示されます(これがテスト サイトの外観です)。ボックス内にあらゆる種類のコンテンツが表示されます。

私は jQuery に関しては非常に初心者であり、どこから始めればよいかについての助けが必要です。どこでもチュートリアルを探しましたが、これに固有のものはありません。誰かが私を正しい方向に向けることができれば、またはそれから学ぶことができるテンプレートは素晴らしいでしょう.

4

2 に答える 2

1

あなたが探しているのは、jquery animate 関数です。

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
    });
});

ここで詳細情報を見つけることができます: http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

背景の変更については、jquery を使用して、クリック時に css background プロパティを設定できます。

var $backgroundURL = www.imageURL.com/image.jpg;
$('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});

完全なコードは次のようになります。

$(document).ready(function() {
    $('#buttonID').click(function() {
        $('#divToSlide').animate({width: 'toggle'});
        var $backgroundURL = www.imageURL.com/image.jpg;
        $('#divToChange').css({'background-image':'url("'+$backgroundURL'")'});
    });
});
于 2012-06-26T02:46:18.327 に答える
0

http://buildinternet.com/project/supersized/slideshow/3.2/fade.html

始めるのに良い場所です。options ですべてのオプションを無効にします: http://buildinternet.com/project/supersized/docs.html#options_docs

スーパー化された上にメニューを配置し、クリックすると、API 呼び出しを使用して対応する画像にフェードします: http://buildinternet.com/project/supersized/docs.html#api_docs

css positiong と z-index を使用して、この上にメニューを配置します

メニュー項目にクリック イベントを追加します。

メニュー項目をクリックするときは、次の操作を行います。

goto corresponding slide image
show corresponding content

対応するコンテンツを表示/非表示にするだけで開始し、アニメーション機能を使用して幅または位置をアニメーション化します。

幸運を。

于 2012-06-26T02:45:17.207 に答える