动画框架大小调整 [英] Animating frame resizing
问题描述
我有一个网页，其中有两个框架水平堆叠（比如说500px，剩下的）。点击最小化图像后，左侧的框架缩小至100px左右。是否有可能通过jquery / javascript / css动画这个缩小？
解决方案如果你正在寻找动画内框，那么我会与莫勒博士的回答一起去。但是，如果你正在寻找框架组的动画，你将不得不手动完成。下面的例子说明。为了检查它，你最好使用本地Web服务器来避免跨域限制的问题（至少在Chrome中，没有在其他地方进行过测试......）。
frame1.html
< html>
< body>
frame 1
< br />
< a href ='＃'class ='minimize'>最小化< / a>
< script type =text / javascript
src =http://code.jquery.com/jquery-latest.min.js>< / script>
< script type ='text / javascript'>
$（function（）{
$（'。minimize'）。click（function（evt）{
evt.preventDefault（）;
window.parent.minimize（） ;
返回false;
}）;
}）;
< / script>
< / body>
< / html>
frame2.html
< html>< body> frame 2< / body>< / html>
frameset.html
< HTML>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.min.js>< / script>
< script type ='text / javascript'>
$（function（）{
var minimizeInterval = null;
var current = 500;
var pace = 15;
var stop = 100;
window.minimize = function（）{
minimizeInterval = setInterval（function（）{
console.log（'minimizing ...'）;
$（'frameset'） .attr（'cols'，current +'，*'）;
current - = pace;
if（current
}， 10）;
};
}）;
< / script>
< / head>
< frameset cols =500，*>
< frame id ='frame1'src =frame1.html>< / frame>
< frame id ='frame2'src =frame2.html>< / frame>
< / frameset>
< / html>
Is it possible to animate the re-sizing of a frame in html?
I have a webpage where there a are two frames horizontally stacked (say 500px, remaining). Upon click of a 'minimize' image, the frame to the left is shrunk to around 100px. Is it possible to animate this shrinking via jquery/javascript/css?
If you are seeking to animate inner frames then I would go with Dr Molle's answer. If, however you are seeking to animate a frameset, you will have to do it manually. The example below illustrates. To examine it, you 'd better use a local web server to avoid problems with cross - domain restrictions (at least in Chrome, haven't tested it anywhere else...).
frame1.html
<html>
<body>
frame 1
<br />
<a href='#' class='minimize'>Minimize</a>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function () {
$('.minimize').click(function (evt) {
evt.preventDefault();
window.parent.minimize();
return false;
});
});
</script>
</body>
</html>
frame2.html
<html><body>frame 2</body></html>
frameset.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript'>
$(function () {
var minimizeInterval = null;
var current = 500;
var pace = 15;
var stop = 100;
window.minimize = function () {
minimizeInterval = setInterval(function () {
console.log('minimizing...');
$('frameset').attr('cols', current + ',*');
current -= pace;
if (current < stop)
clearInterval(minimizeInterval);
}, 10);
};
});
</script>
</head>
<frameset cols="500,*">
<frame id='frame1' src="frame1.html"></frame>
<frame id='frame2' src="frame2.html"></frame>
</frameset>
</html>
这篇关于动画框架大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
