css3实现元素的舒卷效果代码实例

css3实现元素的伸缩效果代码实例

css3实现元素的伸缩效果代码实例:
本章节分享一段代码实例，它利用css3实现了元素的伸缩效果。
这里为了进行演示，结合了javascript代码。
代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style>
.slider{   
  overflow-y:hidden;   
  max-height:500px;   
  /* 最大高度 */  
  background:pink;   
  height:200px;   
  width:200px;   
  /*  Webkit内核浏览器：Safari and Chrome*/  
  -webkit-transition-property: all;   
  -webkit-transition-duration: .5s;   
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  /*  Mozilla内核浏览器：firefox3.5+*/  
  -moz-transition-property: all;   
  -moz-transition-duration: .5s;   
  -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  /*  Opera*/  
  -o-transition-property: all;   
  -o-transition-duration: .5s;   
  -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
  /*  IE9*/  
  -ms-transition-property: all;   
  -ms-transition-duration: .5s;   
  -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);   
}   
.slider.closed{   
  max-height:0;   
}             
</style>
<script>
window.onload = function () {
  var obt = document.getElementById("bt");
  var odiv = document.getElementById("slider");
  obt.click = function () {
    odiv.classList.toggle('closed');
  }
}
</script>
</head>
<body>
<div class="slider" id="slider"></div>  
<button id="bt">查看效果</button>  
</body>
</html>

上面的代码实现了我们的要求，这里不多介绍了，更多内容可以参阅相关阅读。
相关阅读:
（1）.css3的transition属性可以参阅CSS3的transition属性详解一章节。
（2）.classList可以参阅HTML5的classList属性用法介绍一章节。
（3）.toggle()可以参阅HTML5的classList集合添加新class的toggle()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18339

更多内容可以参阅:http://www.softwhy.com/divcss/

css3实现元素的舒卷效果代码实例

相关推荐