響應式上滑/下滑div onclick

我有一個鏈接，點擊時需要向上滑動或向下滑動（取決於狀態）包含響應全寬視頻的DIV。作爲其響應和寬屏視頻的高度不能修復（我現有的代碼這樣做，需要改變）。該DIV（包含視頻）必須在頁面加載時隱藏。響應式上滑/下滑div onclick

我在這裏有我現有的代碼：http://jsfiddle.net/D5EMp/它在一定程度上起作用，因爲它隱藏/顯示視頻。但是，主要問題是視頻的高度在頁面加載時可見，並且會創建一個空白區域。

我需要視頻向下/向上滑動，並且從水平黑條淡入/淡出，同時該區域下面的內容在顯示區狀態改變時被壓下或拉起。

一個額外的功能是添加鏈接被點擊時頁面滾動到該開放DIV的功能。

2012-09-17 egr103

你在你的CSS添加的填充造成的差距：

padding-bottom: 56.25%; /* 16/9 ratio */ 
padding-top: 30px; /* IE6 workaround*/

您可以在顯示時使用此填充進行動畫製作，example here，但它似乎會導致視頻在Firefox上變得雜亂無章。

在試圖將高度設置爲動畫之前，我會計算正確的高度，並且根本不使用填充。要獲得16/9視頻正確的高度，你只是劃分寬度由16再由9乘以它的工作例如：

要自動滾動頁面，視頻的頂部，你可以把這個作爲動畫的完整功能：

function(){$('html, body').scrollTop($('#showreel').offset().top);}

2012-09-17 11:11:03 Timm

感謝您的回答，我明白您的意思。有沒有辦法不使動畫填充計算？因此，例如，我點擊按鈕，計算填充寬度所需的視頻大小，然後將包裝DIV向下滑動（以適合計算的大小），然後視頻在頂部淡出？反之亦然，當你隱藏視頻時？這可以做到嗎？ – egr103

是否這樣？ http://jsfiddle.net/D5EMp/6/ – Timm

是的，這很好，這種方法可以響應嗎？例如，當您調整瀏覽器的大小時，視頻不會隨窗口一起展開（在邊上留下黑色條），是否可以使其響應？ – egr103

空格來自您在#showreel上設置的填充，只需將其刪除即可。

最大的問題是如何知道視頻的大小。但在我看來，在加載視頻之前無法知道視頻的大小。訪問iframe會導致一些跨域問題。

他們，你可以搜索另一種方式來解決這個問題，不只是技術

這就是我的想法

2012-09-17 10:59:36 xiaohao

關於跨域問題時，Vimeo的視頻將被更改爲將自己的服務器上託管的視頻（使用HTML5）。我沒有這個視頻，所以使用Vimeo作爲astop差距解決方案:) – egr103

回答