0

クリックするとiframeが開き、iframeが徐々に大きくなり、onmouseoutを閉じる画像を設定しようとしています。これが私がこれまでに持っているものです：

<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("src","");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("onclick","grow()")
ifrm.setAttribute("id","amazingIFrame")
ifrm.style.display = "block";
ifrm.style.width = 640+"px";
ifrm.style.height = 400+"px";
ifrm.style.marginLeft = "325";
ifrm.style.marginTop = "125";
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";
}
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() {
    interval = setInterval("grow()", 10);  // repeat every 10 ms
}
</script>

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

</body>
</html>

ただし、これは機能しません。何か案は？

4

2 に答える 2

0

接続しているクリック イベントは、iframe をクリックした場合にのみ発生します。広い境界線を指定し、境界線をクリックすると、機能することがわかります。の後にアラートを入れると、ifrm = document.getElementById('amazingIFrame');表示されます。

iframe 内をクリックしたときにクリック イベントが発生するようにするには、そこに HTML を配置し、iframe 自体にある DOM に接続してイベントを発生させる必要があります。

于 2012-09-05T20:59:55.120 に答える
0

いくつかの問題があります。

  • あなたは決して電話しませんstartGrow()。
  • iframe は、作成時にすでに 500px を超えるサイズになっています
  • ifrm.style.width < 500 は正しくありません。ifrm.style.width には px が含まれるため、10px と 500 を比較することになります...
  • setInterval 構文が正しくありません。setInterval(grow, 10); である必要があります。
  • 高さの前に二重引用符があります
  • パラメータを渡さないので、src は null になります (本当に不要です)。

このようにしてみてください

function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src","");
ifrm.setAttribute("onmouseout","closeFrame()")
ifrm.setAttribute("onclick","grow()")
ifrm.setAttribute("id","amazingIFrame")
ifrm.style.display = "block";
ifrm.style.width = 0;
ifrm.style.height = 400+"px";
ifrm.style.marginLeft = "325";
ifrm.style.marginTop = "125";
ifrm.style.position = "absolute";
ifrm.style.top="0px";
ifrm.style.color="red";
ifrm.style.zIndex= "101";
document.body.appendChild(ifrm);
startGrow();
}
function closeFrame(){
ifrm.style.display = "none";
}
function grow() {
    ifrm = document.getElementById('amazingIFrame');
    var width = parseInt(ifrm.style.width.replace("px",""));
    if (width < 500) {
        ifrm.style.width = (width + 10) +"px";
    } else {
        clearInterval(interval);  // stop growing when it's big enough
    }
}
function startGrow() {
    interval = setInterval(grow, 10);  // repeat every 10 ms
}
于 2012-09-05T21:08:41.090 に答える