0

リンクからクリックするとiframeが徐々に大きくなるようにしようとしています（リンクが中心点です）。リンクのサイズになり、iframeのサイズに拡大します。他のリンクがあるので、同じ効果があります。何か案は？初心者でごめんなさい

<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>
4

1 に答える 1

0

必要な動作をアニメーション化する別の関数、つまり 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();">

ドキュメントのどこかに。

成長するにつれて位置を調整して、中央に留まるようにする必要があるかもしれませんが、アイデアはそこにあります.

ユーザーがリンクにカーソルを合わせたときにボックスを開こうとしているようです。動的に読み込まれたコンテンツを含む div など、iframe よりも優れた方法があります。

于 2012-09-05T16:19:18.830 に答える