<!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>
</head>
<body onload="chmenu(0)">
<style>
a{color:#fff;font-size:16px;}
a:hover {color:#996;font-size:18px;}
</style>
<div style="width:800px; height: 300px; margin: 0 auto; border: 0px solid #000; background: #000;">
<div style="width: 200px; height: 300px; border:0px solid #F00; float: left; background: #a00;OVERFLOW: hidden;" id="left">
<div style="width:100%;color:#fff;padding:10px">
<a href="#" onclick="chmenu(1)">menu1</a><br>
<a href="#" onclick="chmenu(2)">menu2</a><br>
<a href="#" onclick="chmenu(3)">menu3</a><br>
<a href="#" onclick="chmenu(4)">menu4</a>
</div>
</div>
<div style="width: 10px; float: left;CURSOR: pointer;padding-top:140px;color:#fff" onclick="cy()"><span id="sw">关</span></div>
<div style="width: auto;height: 300px; border:0px solid #00F; float: left; background: #00a;" id="right">
<div id="right_con" style="width:100%;color:#fff;"></div>
</div>
</div>
<script>
function chmenu(k){
document.getElementById('right_con').innerHTML=document.getElementById('con_'+k).innerHTML
}
</script>
<div id="con_0" style="display:none">
<div style="padding:10px">
<h2>menu0</h2>
<span class="s">This is CaiYing2007'menu0</span>
</div></div>
<div id="con_1" style="display:none">
<div style="padding:10px">
<h2>menu1</h2>
<span class="s">This is CaiYing2007'menu1</span>
</div></div>
<div id="con_2" style="display:none">
<div style="padding:10px">
<h2>menu2</h2>
<span class="s">This is CaiYing2007'menu2</span>
</div></div>
<div id="con_3" style="display:none">
<div style="padding:10px">
<h2>menu3</h2>
<span class="s">This is CaiYing2007'menu3</span>
</div></div>
<div id="con_4" style="display:none">
<div style="padding:10px">
<h2>menu4</h2>
<span class="s">This is CaiYing2007'menu4</span>
</div></div>
<script>
var act=1;//开关标记（1：开状态，－1：关状态）
var n=50;//缩（或放）总的移动次数
var t=1;//每次移动延迟时间基数（>0，单位毫秒）
var x=0;//缩（或放）之前的原始宽度
var w=200;//id="left"的宽度
var obj,timer,i
function cy(){
obj=document.getElementById('left');
var sw=document.getElementById('sw')
if (act==1){act=-1;x=w;i=0;sw.innerHTML="开";}else{ act=1;x=0;i=0;sw.innerHTML="关";}
co()
}
function co(){
if (i>n){clearTimeout(timer);}
else {obj.style.width=(x+act*(w/n)*i)+"px"; timer=setTimeout ("co()",t*i);i++}
};
</script>
</body>
</html>
