JS控制Div，在线等，谢谢

我做了一个例子，基本实现你的要求，希望对你有所帮助。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<script>
var speed=20;
var temp=new Array();
var clipright;
var clipleft=0;
var height;
var tim;
function onInit()
{
clipright=document.body.clientWidth/2;
height=document.body.clientHeight;
width = document.body.clientWidth;
var wArr = new Array();
wArr[0] = 0.3;
wArr[1] = 0.7;
        for (i=1;i <=2;i++){
            temp[i]=eval("document.all.div"+i+".style");
            temp[i].width= parseInt(width*wArr[i-1]);
            temp[i].height=height;
            temp[i].pixelLeft=(i-1)*parseInt(width*wArr[0]);
temp[i].position = "absolute";// 必须设定绝对定位，否则定位层
temp[i].display = "";
        }
//setTimeout("openit()",5000);// 设定5秒后缩进
}

function closeLeft()
{
temp[1].display = "none";// 隐藏左侧层
temp[2].pixelLeft=0;
temp[2].position = "absolute";// 必须设定绝对定位，否则定位层
}
</SCRIPT>
</head>
<body onload="onInit()">
<div id="div1"  style="background-color:#0000CC;"><a href="#" onClick="closeLeft()"><font color="#FFFF00">关闭</font></a></div> <div id="div2" style="background-color:#00aaCC;"><a href="#" onClick="onInit()"><font color="#FFFF00">恢复</font></a> </div> </body>
</html>

上一帖，没看清楚。这个完全实现楼主要求。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档 </title>
<script>
var speed=20;
var temp=new Array();
var clipright;
var clipleft=0;
var height;
var tim;
function onInit()
{
clipright=document.body.clientWidth/2;
height=document.body.clientHeight;
width = document.body.clientWidth;
var cLeft = 0;
var wArr = new Array();
wArr[0] = 0.7;
wArr[1] = 0.1;
wArr[2] = 0.1;
wArr[3] = 0.1;
        for (i=1;i <=4;i++){
            temp[i]=eval("document.all.div"+i+".style");
            temp[i].width= parseInt(width*wArr[i-1]);
            temp[i].height=height;
if ( i==1 )
{
temp[i].pixelLeft=0;

}
            else
{
temp[i].pixelLeft=parseInt(cLeft);
}
cLeft += parseInt(temp[i].width.replace("px",""));
temp[i].position = "absolute";// 必须设定绝对定位，否则定位层
temp[i].display = "";
        }
}

function closeLeft()
{
clipright=document.body.clientWidth/2;
height=document.body.clientHeight;
width = document.body.clientWidth;
var cLeft = 0;
var wArr = new Array();
wArr[0] = 0;
wArr[1] = 0.1;
wArr[2] = 0.1;
wArr[3] = 0.1;
        for (i=1;i <=4;i++){
            temp[i]=eval("document.all.div"+i+".style");
            temp[i].width= parseInt(width*wArr[i-1]);
            temp[i].height=height;
if ( i==1 )
{
temp[i].pixelLeft=0;

}
            else
{
temp[i].pixelLeft=parseInt(cLeft);
}
cLeft += parseInt(temp[i].width.replace("px",""));
temp[i].position = "absolute";// 必须设定绝对定位，否则定位层
temp[i].display = "";
        }
}
</SCRIPT>
</head>
<body onload="onInit()">
<div id="div1"  style="background-color:#0000CC;"><a href="#" onClick="closeLeft()"><font color="#FFFF00">关闭</font></a></div> <div id="div2" style="background-color:#00aaCC;"><a href="#" onClick="onInit()"><font color="#FFFF00">恢复</font></a> </div>
<div id="div3" style="background-color:#00BBCC;"><a href="#" onClick="onInit()"><font color="#FFFF00">恢复</font></a> </div>
<div id="div4" style="background-color:#00CCCC;"><a href="#" onClick="onInit()"><font color="#FFFF00">恢复</font></a> </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>
<style media="all" type="text/css">
.Left7{float:left; width:70%; height:500px; background:#3E3E3E; color:#fff;}
.Right1{float:left; width:10%;height:500px; background:#666666;color:#fff;}
.Right2{float:left; width:10%;height:500px; background:#999999}
.Right3{float:left; width:10%;height:500px; background:#ccc}
</style>
</head><body>
<script type="text/javascript">
function closeR()
{
if(closeRRR.style.display=='')
closeRRR.style.display='none';
else
closeRRR.style.display='';
}
</script>
<div class="Left7" onclick="closeR()" id="closeRRR">关闭</div>
<div class="Right1" onclick="closeR()" >恢复</div>
<div class="Right2"></div>
<div class="Right3"></div>
</body>
</html>

请问各位，我上面还有个div，如果float=该怎么设置呢？

  <body>
  <div id="div_t">
  <table width=100% height="100%" border="0"> <tr>
    <div id="div_1"> <td width=70% bgcolor="#0000FF">div1 <input type="button" value="关闭" onclick="Div_gb()"/> </td> </div>
    <div id="div_2"> <td width=10% bgcolor="#CCFFCC">div2 </td> </div>
    <div id="div_3"> <td width=10% bgcolor="#FF0000">div3 </td> </div>
    <div id="div_4"> <td width=10% bgcolor="#FFFF00">div4 </td> </div>
    </tr> </table>
</div>
</body>
这个不就是DIV 加4个DIV吗？？？？9楼的

我不太明白用div该怎么布局
这个页面由3个大div组成，上面，左边，右边，右边包括3个小div
上面是始终不动的，我现在效果已经实现了，用的绝对定位position: absolute
但是感觉这个方法不太好，把div的长宽都定死了

<!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 runat="server">
<title>无标题页</title>
   <link href="styles/dntmanager.css" type="text/css" rel="stylesheet" />
    <link href="styles/modelpopup.css" type="text/css" rel="stylesheet" />
</head>
<body>
<table height=200px><tr><td></td></tr></table>
<script language="javascript" type="text/javascript" >
var oPopup = window.createPopup();
//function HideTip()
//{
//oPopup.hide();
//}
function ShowTip(frameUpNameC,spanUpNameC,divUpNameC,frameDownName,spanDownName,divDownName)
{
with (oPopup.document.body)
{
    style.backgroundColor="lightyellow";
    style.border="solid black 1px";
    var wanrt = '<div id = "hintdivup" style ="display:none"><span id="'+divUpNameC+'" style="display:none; position:absolute;z-index:500;"><div style="position:absolute; visibility: visible; width: 271px;z-index:501;"><p><img src="images/commandbg.gif" /></p><div class="messagetext"><img src="images/dot.gif" /><span id="'+spanUpNameC+'" ></span></div><p><img src="images/commandbg2.gif" /></p><iframe id="'+frameUpNameC+'" style="position:absolute;z-index:100;width:266px;scrolling:no;" frameborder="0"></iframe></div></span><span id="'+divDownName+'" style="display:none; position:absolute;z-index:500;"><div style="position:absolute; visibility: visible; width: 271px;z-index:501;"><p><img src="images/commandbg3.gif" /></p><div class="messagetext"><img src="images/dot.gif" /><span id="'+spanDownName+'" ></span></div><p><img src="images/commandbg4.gif" /></p></div><iframe id="'+frameDownName+'" style="position:absolute;z-index:100;width:266px;scrolling:no;" frameborder="0"></iframe></span></div>';
    oPopup.document.body.innerHTML = wanrt;
//oPopup.document.body.innerHTML = oContextHTML.innerHTML;
}oPopup.show(window.event.x, 50, 120,20, oPopup.document.body);
}
function showhintinfo(obj, objleftoffset,objtopoffset, frameUpName,spanUpName,divUpName,frameDownName,spanDownName,divDownName,title, info , objheight, showtype ,objtopfirefoxoffset)
{
    var frameUpNameC = frameUpName+"up";
   var spanUpNameC  = spanUpName+"up";
   var divUpNameC   = divUpName+"up";
   ShowTip(frameUpNameC,spanUpNameC,divUpNameC,frameDownName,spanDownName,divDownName);
   //creatediv(frameUpNameC,spanUpNameC,divUpNameC,frameDownName,spanDownName,divDownName);
   var p = getposition(obj);
   if((showtype==null)||(showtype ==""))
   {
       showtype =="up";
   }
   oPopup.document.getElementById(frameUpName+showtype).style.height = objheight + "px";
   oPopup.document.getElementById(spanUpName+showtype).innerHTML = info;
   oPopup.document.getElementById("hintdivup").style.display="block";
   if(objtopfirefoxoffset != null && objtopfirefoxoffset !=0 && !isie())
   {
        oPopup.document.getElementById(divUpName+showtype).style.top=p['y']+parseInt(objtopfirefoxoffset)+"px";
   }
   else
   {
        if(objtopoffset == 0)
        {
if(showtype=="up")
{
oPopup.document.getElementById(divUpName+showtype).style.top=p['y']-oPopup.document.getElementById(spanUpName+showtype).offsetHeight-40+"px";
}
else
{
oPopup.document.getElementById(divUpName+showtype).style.top=p['y']+obj.offsetHeight+5+"px";
}
        }
        else
        {
pop.getElementById(divUpName+showtype).style.top=p['y']+objtopoffset+"px";
        }
   }
  oPopup.document.getElementById(divUpName+showtype).style.left=p['x']+objleftoffset+"px";
}
function getposition(obj)
{
var r = new Array();
r['x'] = obj.offsetLeft;
r['y'] = obj.offsetTop;
while(obj = obj.offsetParent)
{
r['x'] += obj.offsetLeft;
r['y'] += obj.offsetTop-5;
}
return r;
}
//隐藏提示层
function hidehintinfo()
{
    if( oPopup.document.body.childNodes.length == 0 )
        return;
    oPopup.document.getElementById('hintdivup').style.display='none';
    oPopup.document.getElementById('hintdivdown').style.display='none';
}
</script>
<fieldset>
<input name="icp" type="text" id="icp" class="FormBase" onfocus="this.className='FormFocus';"
onblur="this.className='FormBase';" size="30"
onclick="showhintinfo(this,0,0,'hintiframe','hintinfo','hintdiv','hintiframedown','hintinfodown','hintdivdown','提示',
'如果网站已备案, 在此输入您的授权码, 它将显示在页脚, 如没有请留空','50','up')"
onmouseout="hidehintinfo('hintdivup','hintdivdown')" style="width:200px;" />
</fieldset>
</body>
</html>

调试易

JS控制Div，在线等，谢谢

解决方案 »