Rumah > Artikel > hujung hadapan web > 分享一个html Div层的展开与收缩的特效源代码

分享一个html Div层的展开与收缩的特效源代码

零下一度asal: 2017-04-25 13:27:093628semak imbas

html Div层的展开与收缩的特效源代码，下面小编带你们了解一下

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

<html>
<head>
<title>p展开收缩代码-www.zuidaima.com-最代码</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=&#39;300px&#39;;
clearInterval(iIntervalId);
}else{
h+=50; //设置层展开的速度
d.style.display=&#39;block&#39;;
d.style.height=h+&#39;px&#39;;
}
}
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=&#39;none&#39;;
clearInterval(iIntervalId);
}else{
h-=50;//设置层收缩的速度
d.style.height=h+&#39;px&#39;;
}
}
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=&#39;收缩&#39;;
   }
}
</script>
</head>
<body>
<p class="class1">
       <h1>p展开收缩效果</h1>
       <span id="stateBut" onClick="$use(&#39;class1content&#39;,&#39;stateBut&#39;)">展开</span>
       <p id="class1content">something.........</p>
</p>
<p class="class1">
       <h1>p展开收缩效果</h1>
       <span id="stateBut1" onClick="$use(&#39;class2content&#39;,&#39;stateBut1&#39;)">展开</span>
       <p id="class2content">something.........</p>
</p>
<p class="class1">
       <h1>p展开收缩效果</h1>
       <span id="stateBut2" onClick="$use(&#39;class3content&#39;,&#39;stateBut2&#39;)">展开</span>
       <p id="class3content">wojiade</p>
</p>
</body>
</html>

Atas ialah kandungan terperinci 分享一个html Div层的展开与收缩的特效源代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在HTML页面使用JS获取Get参数方法的示例代码分享Artikel seterusnya：如何将php动态网页转换成html？

Artikel berkaitan

Lihat lagi