<
style type
=
"
text/css
"
>
body {
height:100%;
}
.wc, #wc1, #wc2 {
position:absolute;
border-width:0px;
z-index:2;
left:0px;
top:0px;
display:none
}
#wc1 {
width:320px;
height:240px;
background-color:#FFCC00;
}
#wc2 {
width:420px;
height:340px;
background-color:#CCCCCC;
}
.wc {
z-index:1;
}
</ style >
< html >
< head >
</ head >
< body >
< div id = " wc1 " ></ div >
< div id = " wc2 " ></ div >
< center >
< button id = " show_wc1 " > show_wc1 </ button >
< button id = " show_wc2 " > show_wc2 </ button >
< div id = " id3 " ></ div >
< form name = " form1 " method = " post " action = "" >
< input type = " submit " name = " Submit " value = " 提交 " >
</ form >
< br />
</ center >
</ body >
</ html >
< script language = " javascript " >
window.onload = init;
function init() {
div1=document.getElementById("wc1")
div2=document.getElementById("wc2")
button1=document.getElementById("show_wc1")
button2=document.getElementById("show_wc2")
add(div1,button1)
add(div2,button2)
}
function add(o,p) {
o.style.display="block";
o.top=p.offsetTop+p.offsetHeight;
o.left=p.offsetLeft+Math.ceil(p.offsetWidth/2);
o.style.left=parseInt(o.left)-Math.ceil(o.offsetWidth/2)
o.style.top=o.top
o.width = (o.offsetWidth) / 20;
o.height = (o.offsetHeight) / 20;
o.num = 0;
o.style.width=0;
o.style.height=0
o.style.display="none";
p.onmouseover=o.onmouseover=function(){move(o)};
p.onmouseout=o.onmouseout=function(){out(o)};
}
function move(o) {
window.clearTimeout(o.time)
window.status=o.num
if (++o.num<=20){
o.style.display="block";
o.style.width=(o.num * o.width) + "px";
o.style.height=(o.num * o.height) + "px";
o.style.left=parseInt(o.left)-(o.offsetWidth/2)
o.clear=window.setTimeout(move, 10, o);
}
else{
window.clearTimeout(o.clear);
}
}
function out(o) {
window.clearTimeout(o.clear)
window.status=o.num
if(--o.num>=0){
o.style.width=(o.num * o.width) + "px";
o.style.height=(o.num * o.height) + "px";
o.style.left=parseInt(o.left)-(o.offsetWidth/2)
o.time=window.setTimeout(out, 10, o);
}
else{
o.style.display="none"
window.clearTimeout(o.time);
}
}
( function () {
var timeout = window.setTimeout;
window.setTimeout = function (a, b) {
var fun;
if ("function" == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun = function () {
a.apply(null, arg);
};
} else {
fun = a;
}
return timeout(fun, b);
};
} )();
</ script >
body {
height:100%;
}
.wc, #wc1, #wc2 {
position:absolute;
border-width:0px;
z-index:2;
left:0px;
top:0px;
display:none
}
#wc1 {
width:320px;
height:240px;
background-color:#FFCC00;
}
#wc2 {
width:420px;
height:340px;
background-color:#CCCCCC;
}
.wc {
z-index:1;
}
</ style >
< html >
< head >
</ head >
< body >
< div id = " wc1 " ></ div >
< div id = " wc2 " ></ div >
< center >
< button id = " show_wc1 " > show_wc1 </ button >
< button id = " show_wc2 " > show_wc2 </ button >
< div id = " id3 " ></ div >
< form name = " form1 " method = " post " action = "" >
< input type = " submit " name = " Submit " value = " 提交 " >
</ form >
< br />
</ center >
</ body >
</ html >
< script language = " javascript " >
window.onload = init;
function init() {
div1=document.getElementById("wc1")
div2=document.getElementById("wc2")
button1=document.getElementById("show_wc1")
button2=document.getElementById("show_wc2")
add(div1,button1)
add(div2,button2)
}
function add(o,p) {
o.style.display="block";
o.top=p.offsetTop+p.offsetHeight;
o.left=p.offsetLeft+Math.ceil(p.offsetWidth/2);
o.style.left=parseInt(o.left)-Math.ceil(o.offsetWidth/2)
o.style.top=o.top
o.width = (o.offsetWidth) / 20;
o.height = (o.offsetHeight) / 20;
o.num = 0;
o.style.width=0;
o.style.height=0
o.style.display="none";
p.onmouseover=o.onmouseover=function(){move(o)};
p.onmouseout=o.onmouseout=function(){out(o)};
}
function move(o) {
window.clearTimeout(o.time)
window.status=o.num
if (++o.num<=20){
o.style.display="block";
o.style.width=(o.num * o.width) + "px";
o.style.height=(o.num * o.height) + "px";
o.style.left=parseInt(o.left)-(o.offsetWidth/2)
o.clear=window.setTimeout(move, 10, o);
}
else{
window.clearTimeout(o.clear);
}
}
function out(o) {
window.clearTimeout(o.clear)
window.status=o.num
if(--o.num>=0){
o.style.width=(o.num * o.width) + "px";
o.style.height=(o.num * o.height) + "px";
o.style.left=parseInt(o.left)-(o.offsetWidth/2)
o.time=window.setTimeout(out, 10, o);
}
else{
o.style.display="none"
window.clearTimeout(o.time);
}
}
( function () {
var timeout = window.setTimeout;
window.setTimeout = function (a, b) {
var fun;
if ("function" == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun = function () {
a.apply(null, arg);
};
} else {
fun = a;
}
return timeout(fun, b);
};
} )();
</ script >