Question

以下是Google上半小时无法帮助我的问题。我喜欢jquery-images-ondemand ...如何以最流畅的方式修改像这样的东西来处理视频是多么可能。不像我想的那么简单：

我在页面底部有一个图像，当用户滚动到图像的100px以内时，它会转换为视频（不知道我将如何嵌入/加载该图像，但这是另一天）。

在页面上的其他位置滚动时，视频可以继续，停止或只是恢复到图像。

思想？

Answer 1

我在这里发现了一个名为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/

jquery onscroll通过视频顺利替换div

1 个答案: