您的位置：首页 > 其它

点击后，展开收缩功能

2015-07-27 15:15 393 查看

<img src="http://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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

点击后，展开 收缩功能

点击后，展开收缩功能