0

私はウェブサイトのレイアウトについて素晴らしいアイデアを持っていますが、その方法を実験しています..

このように言いましょう: 紙の山がありますが、それらは互いに完全に重なっていませんが、各紙は 20% 表示され、一番上の紙だけが 100% 表示されます。そして、真ん中に紙が欲しい場合は、紙を引き出して上に置き、上にあった紙を覆います.

Webサイトでやりたい。上に横たわる一番上の人を除いて、お互いを覆う5人。真ん中のものを上に引っ張り、古いものを上にかぶせたいとしましょう。そうする最善の方法は何ですか?

私は、現在一番上にある Z-index を、一番上に行く必要があるものよりも低い値に変更する .click イベントを考えていました。ただ言いましょう、彼らは交換します。

質問するのは難しいかもしれませんが、解決策として何を提案しますか?

ありがとう

4

2 に答える 2

1

これにアプローチする方法はいくつかあります。私の頭の上から頭に浮かぶものは、次のようなものです：

変数トップ = 40; // z-index 値 var topPageTop = 20; // トップページのトップオフセット var topPageLeft = 40; // トップページ左オフセット

$('.page').click(function(){
    $(this).css('z-index', top);
    $(this).css('top', topPageTop);
    $(this).css('left', topPageLeft);
    shufflePages(yourDOMContainer)
});

function shufflePages(yourDOMContainer){

    for(pageElement in yourDOMContainer){
         iterate top and left back by a set value for each page, skip the top page
         maybe even inclue an animation function?
    }
}

したがって、私の実装では、各ページは親コンテナーの子要素であり、ul/li のものまたは複数の div である可能性があります。これにアプローチするにはいくつかの方法があります。

明らかに、シャッフル ページ機能は疑似コードですが、最終製品ではなく出発点を探していました。それが何らかの形で役立つか不明な場合はお知らせください。

于 2013-04-19T18:49:02.443 に答える
1

あなたは同じ軌道に乗っているように聞こえます。おそらく、この問題を次のように処理します。

私は必ずしもそれらの z-index を「交換」するわけではありません。私がすることは、「紙のスタック」div の最高の z-index を見つけて、クリックしたばかりの紙に、検出した最高の z-index よりも高い値を割り当てるだけです。わかる？

また、z-index プロパティは、DOM 要素に「位置」がある場合にのみ有効になることも覚えておいてください。つまり、div が position: relative または position: absolute に設定されていることを確認してください。

そのようなもの：

// assign this click function to all divs in the paper stack
$(".paper-stack-divs").click(function() {

    var index_highest = 0;  // initialize the highest index value to 0 

    // loop through all of the paper stack divs

    $(".paper-stack-divs").each(function() {

        // get the z-index value for current paper stack div
        var index_current = parseInt($(this).css("z-index"));

        // check the z-index of the current paper stack div against what we
        // currently know to be the highest z-index.
        // if the current z-index is higher than the last known highest z-index, then
        // set the current z-index as our new highest 

        if(index_current > index_highest) 
             index_highest = index_current;  
    });

    // once the loop is finished and we have the highest z-index, give the paper stack
    // div that was just clicked a z-index of our highest z-index, plus 1, which would        
    // make our clicked div now have the highest z-index value and will go to the top of 
    // the stack

    $(this).css("z-index", parseInt(index_highest+1));


 });
于 2013-04-19T18:51:47.383 に答える