2012-03-19 57 views
3

我想在訪問網站時在同一窗口中彈出視頻。通過這樣做,我想要將視頻的高度從0增加到特定的高度,然後將視頻從其位置稍微向上移動。是否有一個Java腳本函數或JQuery函數可以允許這樣做。代碼會很好,但我很確定如果有一個網站介紹如何做到這一點。謝謝 代碼我現在有:如何在訪問網站時增加視頻大小。 HTML的Java腳本可能JQuery?視頻動畫

<!DOCTYPE HTML> 
<html> 
<head> 
<title>Team Songs</title> 
<link rel="stylesheet" type="text/css" href="default.css"> 
<script type="text/javascript"> 
var t; 
var x; 
window.onload=function() 
{ 
    x = 0; 
    while(x < 300) 
{ 
    t = setTimeout("nothing();",30000); 
    x = x + 10; 
} 
} 
function nothing() 
{ 
     var b = x + 'px'; 
    document.getElementById("mainvideo").height = b; 
}; 
</script> 
</head> 
<body> 
<div id="header"> 
<h2>Software Engineering</h2> 
<h2>Team Songs</h2> 
</div> 
<div style="text-align:center;"> 
<iframe id="mainvideo" width="560" height="315"  src="http://www.youtube.com/embed/2SZGW-6AF3A" frameborder="0" allowfullscreen></iframe> 
</div> 
</body> 
</html> 
+0

是啊讓我更新問題 – tdelaney18 2012-03-19 14:14:32

回答

1

我建議你使用jQuery的.animate()方法:或方法了slideDown http://api.jquery.com/slideDown/

針對您的特殊情況下,我覺得你應該先確保該包含視頻的元素將在不破壞頁面佈局的情況下調整大小。然後使用

$("#container_div_id").slideDown(1000, function(){ 
    $("#container_div_id").css("position","relative"); 
    $("#container_div_id").css("bottom", "10px"); 
}) 

如果你想讓它向上滑動,那麼這將是更加複雜,因爲你必須有DIV固定在底部或東西,也許改變其位置屬性相對可能會移動它不止你自找的。

+0

如果我重新調整包含視頻的元素的大小,我將如何銷燬頁面佈局? – tdelaney18 2012-03-19 18:52:01

+0

這取決於,這可能沒有問題,但如果你有浮動的元素或有一個真正的靜態佈局,你可能會得到意想不到的結果。試試 – Erpheus 2012-03-19 21:31:29

+0

好的,謝謝你的幫助。 – tdelaney18 2012-03-20 05:00:59