你的位置 > 网站首页 > 技术文章 > JavaScript控制DIV+CSS展开和收缩效果2018版

JavaScript控制DIV+CSS展开和收缩效果2018版

1、CSS样式文件

<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{height:300px;overflow:hidden} 

</style> 


2、JavaScript 脚本

<script> 

function $(element){ return element = document.getElementById(element); } function $D(){ var d=$('class1content'); var h=d.offsetHeight; var maxh=300; function dmove(){ h+=50; 

//设置层展开的速度

if(h>=maxh){ d.style.height='300px'; clearInterval(iIntervalId); }else{ d.style.display='block'; d.style.height=h+'px'; } } iIntervalId=setInterval(dmove,2); } function $D2(){ var d=$('class1content'); var h=d.offsetHeight; var maxh=300; function dmove(){ h-=50;

//设置层收缩的速度

if(h<=0){ d.style.display='none'; clearInterval(iIntervalId); }else{ d.style.height=h+'px'; } } iIntervalId=setInterval(dmove,2); } function $use(){ var d=$('class1content'); var sb=$('stateBut'); if(d.style.display=='none'){ $D(); sb.innerHTML='收缩'; }else{ $D2(); sb.innerHTML='展开'; } } 

</script> 


3、DIV层

 <div class="class1"> 

   <h1>DIV层的展开隐藏效果</h1> 

   <span id="stateBut" onclick="$use()">展开</span> 

   <p id="class1content">源码下载,模板下载</p>

  </div>   


快速仿站

Hi, 欢迎加入NAZ.CN技术交流群,带你装逼带你飞!

我要入群