JQuery: Slide Up/Down
浏览数：18 /
时间：2015年06月09日
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Slide Panel</title> 5 <script type="text/javascript" src="script.js"></script> 6 <link rel="stylesheet" type="text/css" href="stylesheet.css"></link> 7 </head> 8 <body> 9 <div class="panel"> 10 <br /> 11 <br /> 12 <p>Now you see me!</p> 13 </div> 14 <p class="slide"><div class="pull-me">Slide Up/Down</div></p> 15 </body> 16 </html>
1 body { 2 margin:0 auto; 3 padding:0; 4 width:200px; 5 text-align:center; 6 } 7 .pull-me{ 8 -webkit-box-shadow: 0 0 8px #FFD700; 9 -moz-box-shadow: 0 0 8px #FFD700; 10 box-shadow: 0 0 8px #FFD700; 11 cursor:pointer; 12 } 13 .panel { 14 background: #ffffbd; 15 background-size:90% 90%; 16 height:300px; 17 display:none; 18 font-family:garamond,times-new-roman,serif; 19 } 20 .panel p{ 21 text-align:center; 22 } 23 .slide { 24 margin:0; 25 padding:0; 26 border-top:solid 2px #cc0000; 27 } 28 .pull-me { 29 display:block; 30 position:relative; 31 right:-25px; 32 width:150px; 33 height:20px; 34 font-family:arial,sans-serif; 35 font-size:14px; 36 color:#ffffff; 37 background:#cc0000; 38 text-decoration:none; 39 -moz-border-bottom-left-radius:5px; 40 -moz-border-bottom-right-radius:5px; 41 border-bottom-left-radius:5px; 42 border-bottom-right-radius:5px; 43 } 44 .pull-me p { 45 text-align:center; 46 }
1 $(document).ready(function(){ 2 $(‘.pull-me‘).click(function(){ 3 $(‘.panel‘).slideToggle(‘slow‘); 4 }); 5 });
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
