Question

我有一个网站，我正在尝试构建，我想使用html5播放我在网站上的任何视频文件。我还希望能够点击保存视频文件的div，然后点击视频文件转换以尽可能多地填充屏幕。

我已经研究过jquery和css3，我发现很多东西都是为了让文字更大，就像那样。

我以为我可以按照getElementById（“#divid”）的方式做点什么.style.height：

然后使用一些过渡来填补两种尺寸之间的差距。

这是我想要实现的网站：

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;
}

谢谢

Answer 1

以下是如何使用CSS3和一些小jQuery执行此操作的快速示例：http://jsfiddle.net/adeneo/gdNue/10/

Answer 2

使用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);

 });

通过id onclick jquery调整div的大小

2 个答案: