サイトにアクセスしたときにビデオサイズを大きくする方法HTMLのJavaスクリプト、おそらくJQuery？ビデオアニメーション

サイトにアクセスしたときに、同じウィンドウにビデオポップアップを表示したいと思います。これを行うことで、ビデオの高さを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>

出典

2012-03-19 tdelaney18

質問を更新します – tdelaney18

私はあなたがjQueryの.animate（）メソッドを使用をお勧め：あなたの特定のケースについてまたはslideDown方法http://api.jquery.com/slideDown/

を私はあなたが最初のことを確認するべきだと思いますビデオを含む要素のサイズがページのレイアウトを損なうことなく変更されます。あなたはそれを上にスライドしたい場合は、div要素が一番下か何かに固定されていなければならないだろう、多分相対的にその位置プロパティを変更するよりも、それ以上を移動する可能性があるとして、次に

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

を使用することは、それはより複雑になりますあなたは欲しかった。

出典

2012-03-19 14:22:37 Erpheus

ビデオを含む要素のサイズを変更すると、ページレイアウトがどのように破壊されますか？ – tdelaney18

これはおそらく問題なく動作しますが、要素をフローティングさせたり、実際には静的なレイアウトをしていると、予期しない結果が生じることがあります。ただ試してみてください – Erpheus

助けてくれてありがとう。 – tdelaney18

サイトにアクセスしたときにビデオサイズを大きくする方法HTMLのJavaスクリプト、おそらくJQuery？ビデオアニメーション

答えて

関連する問題