Javascript 我需要一个iframe的内容像一个动画一样展开，填满整个屏幕并缩小到原来的大小
我需要一个iframe的内容，它的高度为100px，只显示iframe的一部分，以便在单击“阅读更多”按钮时像动画一样展开，并填充整个屏幕向各个方向展开，在单击位于其顶部的“关闭”按钮时，它需要设置动画并缩小到原始大小 我找到一把小提琴，上面画着类似的东西 但我的问题是，我的div不能绝对定位，因为我的div下面有内容，如果我绝对定位这个div，就会受到影响。 绝对定位其余的内容在我看来也不是一个好的解决方案 代码Javascript 我需要一个iframe的内容像一个动画一样展开，填满整个屏幕并缩小到原来的大小,javascript,jquery,css,Javascript,Jquery,Css,我需要一个iframe的内容，它的高度为100px，只显示iframe的一部分，以便在单击“阅读更多”按钮时像动画一样展开，并填充整个屏幕向各个方向展开，在单击位于其顶部的“关闭”按钮时，它需要设置动画并缩小到原始大小 我找到一把小提琴，上面画着类似的东西 但我的问题是，我的div不能绝对定位，因为我的div下面有内容，如果我绝对定位这个div，就会受到影响。 绝对定位其余的内容在我看来也不是一个好的解决方案 代码 可能最简单的方法是在Jquery中使用.animate{}方法 看看这把小提琴
可能最简单的方法是在Jquery中使用.animate{}方法 看看这把小提琴： .animate{}允许您更改css属性，然后在元素上平滑地设置更改的动画。您可以传递几个不同的参数。在小提琴中，你会看到我超过了1000——这是动画完成的持续时间，单位为毫秒
您可以在此处阅读有关参数和方法的更多信息：这确实很有帮助。但是iframe需要覆盖页面中的其余内容并覆盖它们，这似乎只有在iframe完全定位的情况下才有可能。但是页面中有这么多动态内容，我不想绝对定位iframe 这就像我想要的一样，只是不能绝对定位 JS:
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);