逐渐增长的iframe onclick

即时通讯尝试使iframe逐渐增长onclick从链接（链接是中心点）。它将成为链接的大小，然后增长到iframe的大小。会有其他的链接，所以他们会有相同的效果。有任何想法吗？对不起，我是一个新手逐渐增长的iframe onclick

<html> 
<head> 
<link rel="stylesheet" href="Css/style.css" type="text/css" media="screen" /> 
<script language="JavaScript" type="text/javascript"> 
function makeFrame(src) { 
ifrm = document.createElement("IFRAME"); 
ifrm.setAttribute("onmouseout","closeFrame()") 
ifrm.setAttribute("src",""); 
ifrm.style.display = "block"; 
ifrm.style.width = "640px"; 
ifrm.style.height = "400px"; 
ifrm.style.marginLeft = "325px"; 
ifrm.style.marginTop = "125px"; 
ifrm.style.position = "absolute"; 
ifrm.style.top="0px"; 
ifrm.style.color="red"; 
ifrm.style.zIndex= "101"; 
document.body.appendChild(ifrm); 

} 
function closeFrame(){ 
ifrm.style.display = "none"; 
} 
</script> 

</head> 
<body> 
<img src="" onclick=makeFrame() height="100px" width="100px" /> 

</body> 
</html>

来源

2012-09-05 user1646537

BTW - 640+“px”; - 使用“640px”非常好。 –

此外，利润也需要单位。 –

哦好吧非常感谢，现在改变了 – user1646537

你可以创建另一个函数，动画所需的行为，即是增加一些小的增量到iframe的高度和宽度。

<script> 
function grow() { 
    ifrm = document.getElementById('amazingIFrame'); 
    if (ifrm.style.width < 500) { 
     ifrm.style.width += 10; 
    } else { 
     clearInterval(interval); // stop growing when it's big enough 
    } 
} 
function startGrow() { 
    makeFrame(src); // create the frame first 
    interval = setInterval("grow()", 10); // grow every 10 ms 
} 
</script>

然后你可以有

<img onClick="startGrow();">

文档中

地方。

您可能还需要调整位置，以便它保持居中，但这个想法就在那里。

这听起来像是当用户将鼠标悬停在某个链接上时，您正尝试打开一个框。有比iframe更好的方法，比如动态加载内容的div。

来源

2012-09-05 16:19:18 Kevin

你能告诉我如何将它添加到我的代码谢谢 – user1646537

虽然代码有点混乱。该问题询问关于将这种行为放在鼠标悬停上以获取链接，但是您的代码具有onClick for img标记。 – Kevin

哦，是的，我的错误，我改变了它应该是onclick对我来说，它不工作 – user1646537

逐渐增长的iframe onclick

回答

相关问题