2011-12-16 12 views
2

ビルドしようとしているウェブサイトがあります。サイト上にあるビデオファイルを再生するにはhtml5を使います。私はまた、ビデオファイルを保持しているdivをクリックできるようにしたいと思うし、クリックするとビデオファイルの遷移ができるだけ多くの画面を埋めるようにしたい。idでdivをサイズ変更するonclick jquery

私はjqueryとcss3を調べました。私が見つけたことの多くは、テキストを大きくしてそのようにすることです。

私はstyle.height私はgetElementByIdを(「#のdivIdは」)の線に沿って何かを考えていた:2つのサイズの間のギャップを埋めるために、遷移のsomesortを使用し、その後

と。大きな長方形の各内のビデオファイルを持っているでしょうし、クリックされたとき、コンテナ全体を埋めるために成長する

http://www.uvm.edu/~areid/stevesite/steveaudio.html

:ここ

は、私はこれを実装したいサイトです。

編集:ここに私のコードは

ある
<link rel="stylesheet" href="test.css" type="text/css"> 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('#col1A').bind('click', function() { 
     $(this).animate({width: "900px", height: "800px"}, 400); 
    }); 
</script> 
</head> 
<body> 
<div id="col1A" ></div> 
</body> 


#col1A{ 
    border: solid; 
    cursor: pointer; 
    background-color: #f9b5b5; 
    height: 100px; 
    width: 50px; 
    border-radius: 20px; 
} 

答えて

4

ここCSS3と少しjQueryを使ってこれを行う方法の簡単な例です:http://jsfiddle.net/adeneo/gdNue/10/

+0

これは非常に有望です 私は今すぐベッドに行くつもりですが、このショットを明日は非常にありがとう – snackerfish

+0

素晴らしい、非常にうまくいく – kscius

0

使用animate jqueryの機能ありがとう...最後のパラメータはミリ秒です。

$("#id_div_to_resize").animate({widht: "900px", height: "800px"}, 400); 

これは、古いサイズから新しいサイズ(900 x 800)に移行します。

あなたがクリックすること振る舞いを添付したい場合は...

$("#id_div_to_resize").bind('click', function() { 

     $(this).animate({widht: "900px", height: "800px"}, 400); 

}); 
+0

これは非常に論理的なようだが、いくつかのために私はまだそれをアニメートすることができない理由 - あなたはそれが問題ではなかったので、間違った幅を気づいた。私のコードで私の元のポストを更新しようとしています。私は – snackerfish

+0

のクロムを使用しています。 – snackerfish

関連する問題