要素のスケーリング効果コードの css3 実装 example_html/css

要素のスケーリング効果コードの css3 実装 example_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:26:45

オリジナル

1267 人が閲覧しました

要素の伸縮効果を実現する 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 コレクションに新しいクラスを追加する toggle() メソッド」の章を参照してください。

元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18339

詳細については、以下を参照してください: http://www.softwhy.com/divcss/