我正在尝试设置一个图像,单击该图像时,会打开一个逐渐变大的 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>
但是,这不起作用。有任何想法吗?