css3實現元素的伸縮效果代碼實例:本章節分享一段代碼實例，它利用css3實現了元素的伸縮效果。這裡為了進行演示，結合了javascript代碼。代碼實例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="aut
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/
