0

これは、Googleで30分は私を助けることができなかったクエリです。私はjquery-images-ondemandが大好きです...ビデオを操作するために可能な限りスムーズな方法でそのようなものを変更することはどのように可能でしょうか。思ったほど単純ではありません：

ページの下部に画像があります。ユーザーが画像の100px以内にスクロールすると、画像に移行して動画になります（どのように埋め込む/読み込むかはわかりませんが、それはまた別の日です）。

ページの他の場所をスクロールすると、ビデオが続行、停止、または単に画像に戻る可能性があります。

考え？

4

1 に答える 1

0

ここから と呼ばれる単純な関数を見つけました。これisScrolledIntoViewは、要素がビューポート ビューにあるかどうかを確認するために使用されます。

function isScrolledIntoView(elem) {
    var $window = $(window),
        docViewTop = $window.scrollTop(),
        docViewBottom = docViewTop + $window.height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).outerHeight();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

上記の関数は次のように実装できます。

$(window).on("scroll", function() {
    $('div.video').each(function() {
        // Change the div element into a video when reached the visible area
        if (isScrolledIntoView(this)) {
            $(this).replaceWith('<iframe class="video" src="' + $(this).data('video') + '"></iframe>');
        }
    });
});​

デモ: http://jsfiddle.net/tovic/vVaat/11/

于 2012-11-08T17:54:13.803 に答える