JQuery: Slide Up/Down

原文链接： http://www.cnblogs.com/fanszone/p/3532438.html

 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 }

stylesheet.css

1 $(document).ready(function(){
2     $('.pull-me').click(function(){
3         $('.panel').slideToggle('slow');
4     });
5 });

script.js

转载于:https://www.cnblogs.com/fanszone/p/3532438.html

猜你喜欢