有关JAVASCRIPT控制的问题（先给100，解决再加100）！！

可以实现。只要将左边的表单元格设置为nowrap。右边的iframe的width设置为100%。当左边变化时，右边的iframe会自动变化宽度。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<script language=javascript>
function showLeft()
{
document.all.theLeft.style.pixelWidth=20;
document.all.theRight.style.pixelWidth=750;
}
function showRight()
{
document.all.theLeft.style.pixelWidth=120;
document.all.theRight.style.pixelWidth=650;
}
</script>
</head><body bgcolor="#FFFFFF" text="#000000">
<table width="770" border="0" cellspacing="1" cellpadding="0" height="377">
  <tr>
    <td style="width:120px" bgcolor="#FF0000" id="theLeft">
<button onclick="showLeft()">隐藏</button><br>
<button onclick="showRight()">还原</button></td>
    <td style="width:650px" bgcolor="#0000FF" id=theRight>
<iframe id=theIframe width='100%' height='100%'></iframe></td>
  </tr>
</table>
</body>
我做了些小修改：<script language=javascript>
function showLeft()
{
document.all.theLeft.style.pixelWidth=20;
document.all.theLeft.innerHTML="菜单栏，现宽20px";
document.form1.btn1.style.display='none';
document.form1.btn2.style.display='';
}
function hdLeft()
{
document.all.theLeft.style.pixelWidth=120;
document.all.theLeft.innerHTML="菜单栏，现宽120px";
document.form1.btn1.style.display='';
document.form1.btn2.style.display='none';
}
</script>
</head><body bgcolor="#FFFFFF" text="#000000"><table width="770" border="0" cellspacing="1" cellpadding="0" height="377" id="table1" name="table1">
  <tr>
    <td style="width:120px" bgcolor="#cc8800" id="theLeft" nowrap>
菜单栏，现宽120px</td>
    <td style="width:100%" bgcolor="#0000FF" id=theRight>
<iframe id=theIframe width='100%' height='100%'></iframe></td>
  </tr>
</table>
<form id="form1" name="form1">
<button onclick="showLeft()" style="display:;" id="btn1" name="btn1"><font face="Webdings" size="6"><b>7</b></font><br></button>
<button onclick="hdLeft()" style="display:none;" name="btn2"><font face="Webdings" size="6"><b>8</b></font></button>
</form>
<html>
<head>
<style>
.yellowSmallCLF { font-size: 15px; color: #000000;}
.yellowSmallCLF   a:link     { color: #000000; text-decoration: none;}
.yellowSmallCLF a:visited { color: #000000; text-decoration: none;}
.yellowSmallCLF a:active { color: #000000; text-decoration: none;}
.yellowSmallCLF a:hover     { color: #FF9900; text-decoration: underline;}
</style>
<script language=javascript>
function menuBar(idstr){
this.closeBar=closeBar;
this.openBar=openBar;
this.obj=document.all[idstr];
this.css=this.obj.style;
this.moveTo=moveTo;
this.makeAnimate=makeAnimate;
this.makeAnimate();
this.startAni=startAni;
}
function closeBar(){
    this.startAni(-100,0);
    with(document.all.Main.style){
      left=20;
      top=0;
      width=document.body.clientWidth-20;
   }
}
function openBar(){
    this.startAni(0,0)
    with(document.all.Main.style){
      left=120;
      top=0;
      width=document.body.clientWidth-120;
    }
}
function moveTo(x,y){
    this.x=x;
this.y=y;
this.css.left=this.x;
this.css.top=this.y
}
var aoa = new Array();
var ANICOUNT = -1;
var ANIMODE = true;
function makeAnimate() {
this.aoa = aoa.length;
aoa[aoa.length] = this;
this.animating = false;
this.StartX = 0;
this.StartY = 0;
this.EndX = 0;
this.EndY = 0;
this.EndY = 0;
this.aniSpeed =10;
this.timeOut = null;
this.aniExe = "";
this.startAni = startAni;
this.ani = checkAni;
}
function startAni( endx, endy, aniSpeed) {
if(ANIMODE) {
this.animating = true;
this.StartX = this.x;
this.StartY = this.y;
this.EndX = endx;
this.EndY = endy;
this.aniSpeed = (aniSpeed!=null) ? aniSpeed : this.aniSpeed;
if(this.timeOut != null) {
clearTimeout(this.timeOut);
    ANICOUNT--;
    }
    ANICOUNT++;
    this.ani();
}else {
this.EndX = endx;
this.EndY = endy;
this.moveTo(endx, endy);
}
}
function checkAni() {
if (this.EndX > this.StartX) {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) + 1;
if (this.x > this.EndX) this.x = this.EndX;
}else {
this.x += Math.floor((this.EndX - this.x) / this.aniSpeed) - 1;
if (this.x < this.EndX) this.x = this.EndX;
}
if (this.EndY > this.StartY) {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) + 1;
if (this.y > this.EndY) this.y = this.EndY;
}else {
this.y += Math.floor((this.EndY - this.y) / this.aniSpeed) - 1;
if (this.y < this.EndY) this.y = this.EndY;
}
this.moveTo(this.x,this.y);
if (this.x != this.EndX || this.y != this.EndY ) {
this.timeOut = eval("setTimeout('aoa[" + this.aoa + "].ani()',10)");
}else {
clearTimeout(this.timeOut);
this.timeOut = null;
this.animating = false;
ANICOUNT--;
if(this.aniExe){
eval(this.aniExe);
this.aniExe = "";
}
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="Menu" style="position:absolute; left:0px; top:0px; width:120px; height:100%; z-index:1;">
<table width="100%" border="1" cellspacing="0" cellpadding="0" height="100%" >
  <tr>
    <td style="width:20px;word-break:break-all;background-color:#f7f7f7;cursor:hand;" onclick="myBar.closeBar()"><font face="webdings">3</font></td>
    <td style="width:80px;word-break:break-all" valign="top" class="yellowSmallCLF"><br><br><br><a href="www.csdn.net" target="_blank">csdn</a><br><br><br><a href="user1.7host.com/ccrock" target="_blank">llrock</a></td>
    <td style="width:20px;word-break:break-all;background-color:#f7f7f7;cursor:hand;" onclick="myBar.openBar()"><font face="webdings">4</font></td>
  </tr>
</table>
</div>
<div id="Main" style="position:absolute; left:120px; top:0px; width:100%; height:100%; z-index:1;background-color:#7d7dcc"></div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
我考，花了一个小时，不给分不行，一定要分，开玩笑:)，意思意思，刚出炉的，新鲜者呢，满意了吧，把你的table放到Main层中
嗯，Beautiful~~！尤其是菜单栏隐藏时候的动态效果~！
谢谢llrock(百乐宝)！！！
你的解答很精彩！
不过，不是我所需要的，最终解答请查看：saucer(思归) 的解答：
http://www.csdn.net/Expert/TopicView1.asp?id=864440
谢谢llrock(百乐宝)！！！
你的解答很精彩！
不过，不是我所需要的，最终解答请查看：saucer(思归) 的解答：
http://www.csdn.net/Expert/TopicView1.asp?id=864440