jquery onscroll順利取代div與視頻

下面是一個查詢，谷歌半小時無法幫到我。我喜歡jquery-images-ondemand ......如何以最平滑的方式修改類似的內容來處理視頻，這是多麼可能？並不簡單，因爲它聽起來我認爲：jquery onscroll順利取代div與視頻

我有一個圖像在頁面的底部，當用戶滾動到圖像的100像素內，它轉變成一個視頻（不知道我將如何嵌入/加載但那是另一天）。

在頁面上的其他位置滾動時，視頻可能會繼續，停止或簡單地還原爲圖像。

想法？

來源

2012-11-08 Callum

很多。你可以用你已經在小提琴中已有的代碼來詳細描述你的場景嗎？ –

我發現了一個簡單的函數，從這裏叫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-08 17:54:13

jquery onscroll順利取代div與視頻

回答

相關問題