逐漸增長的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

回答

相關問題