4

いくつかの画像を含むdivがあります。ユーザーが画像の上端または下端が親divによって隠されようとしているところまでスクロールすると、画像が消えるようにしたいと思います。構造は次のようになります。

<div class="parent">
   <img/>
   <img/>
</div>

私の目標は、画像の上端または下端が親divによって非表示になり始めたときに画像をフェードアウトさせ、フルビューにスクロールインしたときに画像をフェードインさせることです。

私はjQueryを使用しており、divscrollイベントをリッスンしてをチェックしてimg offset().topいます。表示されていない最上位の値に達すると、画像を非表示にします。

ただし、スクロールイベントごとに画像を反復処理する必要があるため、これには多くのCPU時間がかかるようです。その上、私が呼び出しhide()たとしてもimg、それはまったく隠されません（それが呼び出されたことを確認するためだけにブレークポイントを入れてください、そしてそれはそうでした）。これを行う正確な方法はありますか？

編集： mcpDESIGNSのおかげで、position()の代わりに使用する必要がありましoffset()た。また、に設定されてhide()いるため動作しないようです。だから私はに切り替えました、そしてそれは期待通りに動作します。displaynonevisibility:hidden

EDIT2： メモとして、これが私が使用しているjsであり、mcpDesignsが提案したものとほぼ同じです。

年

var display = $("div");

display.scroll(function () {

    var avatars = $("div > img");
    console.log("************************");
    avatars.each(function (index) {
        console.log($(this).offset().top);

        if ($(this).offset().top < 40)
            $(this).hide();
        else {
            $(this).show();
        }
    });
});

新着

var display = $("div");

display.scroll(function () {

    var avatars = $("div > img");
    console.log("************************");
    avatars.each(function (index) {
        console.log($(this).position().top);

        if ($(this).position().top < 0)
            $(this).css("visibility", "hidden")//.hide();
        else {
            $(this).css("visibility", "")//.show();
        }
    });
});
4

3 に答える 3

4

各画像と、その位置が負（親のスクロール可能なdivの上部を意味する）であるか、スクロール可能なdivの高さと同じ＃であるかに基づいて、多くの計算を行う必要があります。

​$('.parent').scroll(function () {            
    console.log($('img').position().top);

    // if ( negative top position || same#asDivheight) { fadeIn / out, etc }
});​

それで遊んでください、しかしそれは基本的にそれの要点です。

于 2012-09-26T18:57:53.663 に答える
1

私はあなたが適切だと思うかもしれない方法を考え出しました。

コード：

// initialize
var limit = 0;
var timeout;

var scrollCallback = function() {
    limit = 0;
    clearTimeout(timeout);

    // TODO: calculations and hide/show images
}

$(window).scroll(function(e) {
    limit++;
    if (limit > 50) {
        scrollCallback();
    }
    clearTimeout(timeout);
    timeout = setTimeout(scrollCallback, 500);
});​

このコードは、50のスクロールイベントを取得するまでコールバックを起動しません。また、50に達しない場合は、500ミリ秒後に起動します。これは、パフォーマンスの問題に役立つ可能性があります。

于 2012-09-26T19:24:07.963 に答える
0

ここにあなたの喜びのための小さなjsfiddleがあります：http：//jsfiddle.net/BerkerYuceer/35P2e/

$('.parent img').mousemove(function (e) {
    var y = e.pageY - this.offsetTop;
    if (y == $(this).position().top || y == $(this).height()-2)
    {
        alert($(this).position())
        $(this).hide();
    }else 
    {
        $(this).show();
    }
});​

-2は、要素の実際の高さをキャッチするための境界線の高さです。幸運を祈ります。

于 2012-09-26T19:32:06.477 に答える