私が構築しようとしているウェブサイトがあります、私はhtml5を使用して、サイトにあるビデオファイルを再生したい。また、ビデオファイルを保持しているdivをクリックし、クリックすると、ビデオファイルが画面全体を可能な限り移行するようにしたいと考えています。
私はjqueryとcss3を調査しましたが、私が見つけた多くのことは、テキストをより大きくして、そのようなものにすることです。
getElementById( "#divid")。style.heightの行に沿って何かできると思った:
そして、ある種の遷移を使用して、2つのサイズ間のギャップを埋めます。
これは私がこれを実装したいサイトです:
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;
}
ありがとうございました
回答:
回答№1は4CSS3と小さなjQueryを使用してこれを行う方法の簡単な例を次に示します。 http://jsfiddle.net/adeneo/gdNue/10/
回答№2の場合は0
つかいます アニメーション化する 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);
});