1

ブラウザー ウィンドウ幅の 200% の「コンテナー」div があるサイトがあり、オーバーフローが非表示になっています。一部の情報はコンテナーの左半分 (最初の 100%) にあり、一部の情報は右半分 (2 番目の 100%) にあります。次のように、単純なアイコンの切り替えを使用して、コンテナの両方の半分の間を前後にスライドします。

$('.container').animate({'marginLeft':'-=100%'}, 'slow');

--または--

$('.container').animate({'marginLeft':'+=100%'}, 'slow');

問題は、コンテナーの marginLeft に基づいて特定のイベントを実行する必要があることです。

前半が表示されると、必要なイベントを取得するのに問題はありません。しかし、jqueryがコンテナを左に100％スライドさせて後半を見えるようにすると、何も動作しません。

何時間もの調査の後、私は使用できないことを知りました

if ($('.container').css('marginLeft') == '-100%') {
    //do something here

アラートは marginLeft をパーセンテージで示すことはないため、常に正確なピクセル単位で数値を返します。

私の結論は、「if」ステートメントで簡単な計算が必要だということですが、書き方がわかりません。

書かれた英語では、次のようになります。

「ピクセル単位の marginLeft をウィンドウの幅 (ピクセル単位) で割った値が -1 に等しい場合は、何かしてください...」

この非常に初歩的な jquery 計算を作成し、if ステートメントに適用する方法を教えてください。

どんな援助でも大歓迎です。

明けましておめでとうございます、デビッド。

4

2 に答える 2

0

要するに、最初のパネルには大きなポートフォリオ画像が表示され、2 番目のパネルにはサムネイルのグリッドが表示されます。フッターのギャラリー アイコンをクリックすることで、それらを切り替えることができます。Barmar氏（私の最初の返信者、上記）は、絶対配置を支持して、コンテナdivが実際にどこにあるかに関係なく「0」のみを返し続けるマージントグルを捨てる道に私を導きました（ありがとう、先生！）。そうすることで、実際にポジショニングに使用できる数値を受け取り始めましたが、それらの数値を予測可能なものに変換するという問題にまだ直面していたので、if ステートメントで使用できます。だから私がしたことは、この場合は「panelIndex」という変数を作成することでした。これは、コンテナの左位置をブラウザウィンドウの幅で割った結果です。その数字が「0」の場合 最初のパネルが表示されていることを知っています。その数字が「-1」の場合、最初のパネルが画面から左に滑り落ち、2 番目のパネルが表示されていることがわかります。など、次のように:

// GALLERY TOGGLE
$(document).ready(function() {
    $('#gallery_icon').click(function() {

    panelIndex = $('.container').position().left / $( window ).width();

    if ($(this).hasClass('off') && panelIndex == 0)
    {
        $(this).switchClass('off', 'on', 0);
        $('.container').animate({'left':'-100%'}, 'slow');
        // DO SOMETHING
    }
    else ($(this).hasClass('on') && panelIndex == -1)
    {
        $(this).switchClass('on', 'off', 0);
        $('.container').animate({'left':'0'}, 'slow');
        // DO SOMETHING ELSE
    }
    });
});

そう、ええ...私のようにパーセンテージで作業している場合は、上記の単純な方程式のようなものをいつでも使用して、条件ステートメントの予測可能な結果を​​生成できます。

Barmar と Niet the Dark Absol の助けに感謝します。

于 2015-01-01T17:15:51.703 に答える
0

簡単な方法 (計算は必要ありません) は、変数を使用して、天気が 2 番目の部分にあるかどうかを伝えることだと思います。ここで自由に確認できる JSFiddle の小さな例を作成しました: http://jsfiddle.net/lrojas94/3udk9aj9/

基本的なアイデアは次のようになります。

var click = 1;
$(document).ready(function(){

    $('.percent').click(function(){
        if(click === 1)
        {
            $(this).css('marginLeft','-100%');
            click  =  2;
        }
        else{
            $(this).css('marginLeft','0');
            click = 1;
        }

    })

});

Percent クラスは、サイズが 200% パーセントの Div です。詳細については、フィドルを確認してください。

グローバル変数は (ほとんどの場合) 悪い考えだと言われていることを指摘しなければなりません。でも、気軽に使えるシンプルで実用的な方法だと思います。これがあなたの質問に答えてくれることを願っています。そうでない場合は、これからも学べることを願っています.

于 2015-01-01T02:20:58.563 に答える