通过id onclick jquery调整div的大小
我有一个正在尝试构建的网站，我想使用 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;
}
谢谢
I have a website that I am trying to build, I want to use html5 to play any video files I have on the site. I also want to be able to click on the div that holds the video file and on click have the video file transition to fill as much of the screen as possible.
I have looked into jquery and css3 and a lot of what I have found is to make text bigger and stuff like that.
I thought I could do something along the lines of getElementById("#divid").style.height:
and then use somesort of transition to fill in the gap between the two sizes.
here is the site I wanted to implement this in:
http://www.uvm.edu/~areid/stevesite/steveaudio.html
each of the larger rectangles would have a video file within and when clicked would grow to fill the entire container.
edit: here is my code
<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;
}
thank you
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
下面是如何使用 CSS3 和一点 jQuery 执行此操作的快速示例： http://jsfiddle.net/adeneo /gdNue/10/
Here's quick example of how to do this with CSS3 and a little jQuery : http://jsfiddle.net/adeneo/gdNue/10/
使用 animate jquery 函数...最后一个参数是毫秒。
这将从旧尺寸过渡到新尺寸 (900 x 800)；
如果您想将该行为附加到点击...
Use animate jquery function... The final parameter is the milliseconds.
This will transition from the old size to the new (900 x 800);
If you want to attach that behavior to a click...