<img src="https://img-blog.csdn.net/20150727151530201?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
<!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=utf-8" />
<title>点击向右收缩菜单</title>
</head>
<body>
<script language="javascript">
function myfun()
{
show_div();
}
window.onload=myfun;//不要括号
function show_div(){
var obj_div=document.getElementById("starlist");
obj_div.style.display=(obj_div.style.display=='none')?'block':'none';
}
</script>
<a href="javascript:show_div()" >显示/展开</a>
<div id="starlist">
内容<br/>
内容<br/>
内容<br/>
内容<br/>
</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=utf-8" />
<title>点击向右收缩菜单</title>
<style type="text/css">
*{margin:0;padding:0;}
#box{position:absolute;right:0;top:0;overflow:hidden;}
#arrow{
color:#fff;background:#000;width:20px;height:100px;line-height:100px;font-size:12px;font-family:"宋体"; text-align:center;font-weight:bold;
float:left
}
#col_box{width:400px;height:100px;background:#eee;}
</style>
</head>
<body>
<div id="box">
<div id="arrow">></div>
<div id="col_box"><p>111</p><p>111</p><p>111</p></div>
</div>
</body>
<script type="text/javascript">
window.onload = function(){
var oArr = document.getElementById('arrow');
var oMoveBox = document.getElementById('col_box');
var oSpeed = 10;
var timer = null;
var maxW = oMoveBox.offsetWidth;
oArr.onclick = function MoveRight(){
timer = setInterval(function(){
oMoveBox.style.width= oMoveBox.offsetWidth - oSpeed + "px";
if(oMoveBox.offsetWidth<=0 || oMoveBox.offsetWidth>=maxW){
clearInterval(timer);
oSpeed = -oSpeed;
}
},10);
}
}
</script>
</html>