2019-7-1 16:02:25 星期一
实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 8 #tl { 9 width: 240px; 10 overflow: hidden; 11 position: absolute;/*这里一定要设置*/ 12 z-index: 500; 13 margin-top: 0; 14 margin-left: -200px; 15 -webkit-transition: .5s ease-in-out;/* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */ 16 -moz-transition: .5s ease-in-out;/*这里为了兼容其他浏览器*/ 17 -o-transition: .5s ease-in-out; 18 background-color: gray; 19 } 20 21 </style> 22 </head> 23 24 <body> 25 <script> 26 function sider() 27 { 28 var a = document.getElementById('tl'); 29 30 if (a.style['margin-left'] == '0px') { 31 a.style['margin-left'] = '-200px'; 32 } else { 33 a.style['margin-left'] = '0px'; 34 } 35 36 } 37 </script> 38 39 <div id="tl" onclick="sider();"> 40 <div class="in"> 41 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 42 <div class="in"> 43 bbbbbb1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 44 </div> 45 <div class="in"> 46 bbbbb2 47 </div> 48 <div class="in"> 49 bbbbb3 50 </div> 51 </div> 52 </div> 53 <div> 54 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 55 </div> 56 57 </body> 58 59 </html>