jquery - jquery onscroll 用视频平滑替换 div

Question

这是一个在谷歌上半小时无法帮助我的查询。我喜欢 jquery-images-ondemand ......如何以最流畅的方式修改类似的内容以处理视频。不像我想的那么简单：

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

在页面上的其他地方滚动时，视频可以继续、停止或简单地恢复为图像。

想法？

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/