点击后，展开收缩功能

最新推荐文章于 2022-12-26 13:20:15 发布

蜗牛慢慢向上爬

最新推荐文章于 2022-12-26 13:20:15 发布

阅读量899

点赞数

js 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<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.οnlοad=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>

蜗牛慢慢向上爬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击后，展开收缩功能

点击向右收缩菜单 function myfun(){show_div();}window.onload=myfun;//不要括号function show_div(){ var obj_div=document.getElementById("starlist"); obj_div.style.display=(obj_div.style.display=='n
复制链接

扫一扫