动画框架大小调整 [英] 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 clearInterval(minimizeInterval);
}, 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屋!