请问如何让两个弹出层不互相影响，JS代码如何改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实用的滑开层代码</title>
<script>
var flag=0;
function f_s(id){
var obj=document.getElementById(id);
obj.style.display="block";
obj.style.height="1px";
var changeW=function(){
var obj_h=parseInt(obj.style.height);
if(obj_h<=160){
obj.style.height=(obj_h+Math.ceil((160-obj_h)/10))+"px";
}
else{
clearInterval(bw1);
}
}
bw1= setInterval(changeW,1);
if(flag>0){
clearInterval(bw2);
}
}
function closeW(id){
flag++;
var obj=document.getElementById(id);
var closeDiv=function(){
clearInterval(bw1);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";
}
else{
clearInterval(bw2);
obj.style.display="none";
}
}
bw2= setInterval(closeDiv,1);
}
function showDiv(id){
var ele = document.getElementById(id);
clearInterval(bw1);
clearInterval(bw2);
ele.style.display = "block";
ele.style.height = 160 + "px";
}
</script>
<style type="text/css">
#a01{float:left;background:#bbb; width:200px; height:50px;}
#div1{top:50px;background:#CCC; width:200px; display:none; }
#a02{float:left;background:#555; width:200px; height:50px;}
#div2{margin-left:200px; background:#888; width:200px; height:200px; display:none; }
</style>
</head>
<body>
<div id="a01" onmouseover="f_s('div1')" onmouseout="closeW('div1')">111</div>
<div id="a02" onmouseover="f_s('div2')" onmouseout="closeW('div2')">2222</div>
<div id="div1" onmouseover="showDiv('div1')" onmouseout="closeW('div1')">11111111</div>
<div id="div2" onmouseover="showDiv('div2')" onmouseout="closeW('div2')">222222222</div>
</body>
</html>追问：非常感谢你的回答，但我试了下，还是不能用啊，怎么办啊
答案：折腾半天...你试一下
----------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实用的滑开层代码</title>
<script>
window.onload = function(){
//声明一个对象包含主菜单和相应的子菜单
var div_menu = {
"menu_1" : ["child_1",false,false], // 0:id, 1:show, 2:hide
"menu_2" : ["child_2",false,false]
}
for( key in div_menu){
// alert(key);
var menu_obj = document.getElementById(key); //得到 menu_x
// alert(div_menu[key][0])
var child_obj = document.getElementById(div_menu[key][0]) //得到 child_x
menu_obj.onmouseover = function(key,child_obj){
// 使用闭包将child_obj配置给相应的menu_obj
return function(){
alert(div_menu[key][0]+" "+div_menu[key][1]+" "+div_menu[key][2]);
child_obj.style.display="block";
child_obj.style.height="1px";
// 要存放setInterval 的变量
div_menu[key][1] = setInterval(div_show,1,key);
};
}(key,child_obj);
menu_obj.onmouseout = function(key){
return function(){
// 要存放setInterval 的变量
div_menu[key][2] = setInterval(div_hide,1,key);
}
}(key);
child_obj.onmouseover = function(key){
return function(){
this.style.display = "block";
this.style.height = 160+"px";
clearInterval(div_menu[key][2]);
}
}(key);
child_obj.onmouseout = function(key){
return function(){
div_menu[key][2] = setInterval(div_hide,1,key);
}
}(key);
}
// show div
function div_show(key){
var obj = document.getElementById(div_menu[key][0]);
var obj_h=parseInt(obj.style.height);
if(obj_h<160){
obj.style.height=(obj_h+Math.ceil((160-obj_h)/10))+"px";
}
else{
alert(div_menu[key][0]+" "+div_menu[key][1]+" "+div_menu[key][2]);
clearInterval(div_menu[key][1]);
clearInterval(div_menu[key][2]);
}
}
// hidden div
function div_hide(key){
var obj = document.getElementById(div_menu[key][0]);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=parseInt(obj_h-obj_h/10)+"px";
}
else{
alert(div_menu[key][0]+" "+div_menu[key][1]+" "+div_menu[key][2]);
clearInterval(div_menu[key][1]);
clearInterval(div_menu[key][2]);
obj.style.display = "none";
}
}
}
</script>
<style type="text/css">
#menu_1{float:left;background:#bbb; width:200px; height:50px;}
#menu_2{float:left;background:#555; width:200px; height:50px;}
#child_1{position:absolute;background:#CCC; width:200px; display:none;}
#child_2{position:absolute;background:#888; width:200px; margin-left:200px; display:none; }
.clear{clear:both;height:0;}
</style>
</head>
<body>
<div id="menu_1">111</div>
<div id="menu_2">2222</div>
<div class="clear"></div>
<div id="child_1">11111111</div>
<div id="child_2">222222222</div>
</body>
</html>上一个：js倒计时代码
下一个：求php视频教程，divcss视频教程，js视频教程，ps视频教程？
