`

折叠、展开

HTML 
阅读更多 
<html>
<head>
<title>展的折叠、展开</title>
<style> 
#content {
	font-size: 14px;
	width: 1000px;
	height: 500px;
	background: #eee;
	padding: 10px;
	border: 4px #ccc double;
	overflow: hidden;
}
#key {
	color: red;
	float: right;
	margin-top: 0px;
}
</style>
<script>
var s=50;
var minheight=50;
var maxheight=500;
function shoppingcat(){
	var key = document.getElementById("key").innerText;
	if(content.style.pixelHeight==0)content.style.pixelHeight=minheight;
	if(key=="展开"){
		content.style.pixelHeight+=s;
		if(content.style.pixelHeight<maxheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="关闭";
		}
	}else{
		content.style.pixelHeight-=s;
		if(content.style.pixelHeight>minheight){
			setTimeout("shoppingcat();",1);
		}else{
			document.getElementById("key").innerText="展开";
		}
	}
}
</script>
</head>
<body>
	<span id="key" onclick="shoppingcat();">展开</span>
	<div id="content"> 
		源码爱好者
		<br><br>
		源码爱好者源码下载。
	</div>
</body>
</html>
分享到：
| 网页上适时显示的时间&倒计时
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics