jiangzaiwu的gravatar头像
jiangzaiwu 2012-10-15 11:00:08

html Div层的展开与收缩的特效源代码下载

html Div层的展开与收缩的特效源代码

html Div层的展开与收缩的特效源代码下载

<html>
<head>
<title>div展开收缩代码</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor: pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content, #class2content,#class3content  { height:50px;overflow:hidden;display:none;}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(element){
var d=$(element);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
if(h>=maxh){
d.style.height='300px';
clearInterval(iIntervalId);
}else{
h+=50; //设置层展开的速度
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(element){
var d=$(element);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
if(h<=0){
d.style.display='none';
clearInterval(iIntervalId);
}else{
h-=50;//设置层收缩的速度
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(targetid,objN){
var d=$(targetid);
var sb=$(objN);
if (d.style.display=="block"){
    $D2(targetid);
       d.style.display="none";
       sb.innerHTML="展开";
  } else {
    var p=document.getElementsByTagName("p");
    var span=document.getElementsByTagName("span");
 
    for(var i=0,l=p.length;i<l;i++){
		if(p[i]!=d){
    			 p[i].style.height=0;
      			 p[i].style.display="none";
       			span[i].innerHTML="展开";	
		}
    }
    $D(targetid);
       d.style.display="block";
       sb.innerHTML='收缩';
   }
}
</script>
</head>
<body>
<div class="class1">
       <h1>div展开收缩效果</h1>
       <span id="stateBut" onClick="$use('class1content','stateBut')">展开</span>
       <p id="class1content">something.........</p>
</div>
<div class="class1">
       <h1>div展开收缩效果</h1>
       <span id="stateBut1" onClick="$use('class2content','stateBut1')">展开</span>
       <p id="class2content">something.........</p>
</div>
<div class="class1">
       <h1>div展开收缩效果</h1>
       <span id="stateBut2" onClick="$use('class3content','stateBut2')">展开</span>
       <p id="class3content">wojiade</p>
</div>
</body>
</html>

 


最代码官方编辑于2014-8-26 9:38:23


打赏

文件名:div_code.rar,文件大小:1K 下载
  • /
    • /div_code.htm
最代码最近下载分享源代码列表最近下载
ql_yffshun  LV6 2022年6月24日
1310744233  LV2 2021年9月27日
914527116  LV1 2020年12月24日
意随心动  LV1 2020年12月7日
fgdghjjyfgjf  LV1 2020年4月6日
lhwlkj  LV1 2019年10月20日
mondaylang  LV1 2019年6月27日
422559334  LV1 2019年1月5日
lee123321  LV22 2018年8月29日
bianninai  LV1 2018年1月11日
最代码最近浏览分享源代码列表最近浏览
LYaaaaa  LV7 2022年11月27日
ql_yffshun  LV6 2022年6月24日
微信网友_5887505227993088  LV1 2022年3月25日
微信网友_5800007793217536  LV1 2022年1月22日
GitHub121  LV11 2021年10月30日
1310744233  LV2 2021年9月27日
sinian19970415  LV2 2021年3月29日
914527116  LV1 2020年12月24日
神龙大侠花花  LV2 2020年12月18日
意随心动  LV1 2020年12月7日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友