当前位置：首页 >> 网站建设 >> 正文

简单的伸缩效果

文章来自:设计学院 | 发表时间:2007-10-23 11:49:42

Source Code to Run

<!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>设计学院-ui163 缩放栏</title>
<link href="../images/aa.ico" rel="shortcut icon"/>
<style type="text/css">

</style>
</head>
<body>
<div id="xx" style="width:200px;height:24px;">
  <h4>栏目标题</h4>
  <p>Div+CSS,Div CSS教程,CSS2.0,XHTML教程,CSS Templates,CSS Web Design,Web 
	Standards,Div CSS网页布 局,Web标准网页,ui,ue,design,web 
	design,firework,flash,photoshop,网站制作,建站程序,网页设计 </p>
</div>
<script type="text/javascript">
var xx=document.getElementById("xx");
var xx2=xx.getElementsByTagName("h4")[0];
function myfunc(){
	var i=parseInt(xx.style.height.replace("px",""))
	if(i<200){
		i+=10;
		xx.style.height=i+"px";
	}else{
		clearInterval(t);
		xx2.onclick=function(){t2=setInterval(myfunc2,10)}
		xx2.title="点击收缩";
		xx2.className="h42";
	}
}
function myfunc2(){
	var i=parseInt(xx.style.height.replace("px",""))
	if(i>24){
		i-=10;
		xx.style.height=i+"px";
	}else{
		clearInterval(t2);
		xx2.onclick=function(){t=setInterval(myfunc,10)}
		xx2.title="点击展开";
		xx2.className="";
	}
}
xx2.onclick=function(){t=setInterval(myfunc,10)}
</script>
</body>
</html>

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

相关文章

简单的伸缩效果

版权隐私 免责声明 友情链接 学院地图 关于设计学院

版权隐私　　免责声明　　友情链接　　学院地图　　关于设计学院