最代码广告位
jiangzaiwu的gravatar头像
jiangzaiwu2012-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
最代码最近下载分享源代码列表最近下载
fgdghjjyfgjf LV14月6日
星星
lhwlkj LV12019年10月20日
星星
mondaylang LV12019年6月27日
星星
422559334 LV12019年1月5日
星星
lee123321 LV222018年8月29日
太阳月亮星星星星
bianninai LV12018年1月11日
星星
最代码官方 LV1522017年10月12日
皇冠皇冠太阳月亮月亮
8888111 LV12017年9月18日
星星
疯狂的豆子sp LV32017年4月26日
星星星星星星
andesen1992 LV12016年10月27日
星星
最代码最近浏览分享源代码列表最近浏览
llh1314 LV36月15日
星星星星星星
aa123aa LV45月21日
月亮
1798672867 LV155月3日
月亮月亮月亮星星星星星星
fgdghjjyfgjf LV14月6日
星星
yyqq66666 LV22月15日
星星星星
木木coco LV72019年11月20日
月亮星星星星星星
lhwlkj LV12019年10月20日
星星
keep on coding LV12019年7月22日
星星
success19882019年6月28日
暂无贡献等级
mondaylang LV12019年6月27日
星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友