zoukankan      html  css  js  c++  java
  • JQuery: Slide Up/Down

     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
  • 相关阅读:
    LeetCode 1032. Stream of Characters
    LeetCode 872. Leaf-Similar Trees
    LeetCode 715. Range Module
    LeetCode 353. Design Snake Game
    LeetCode 509. Fibonacci Number
    LeetCode 632. Smallest Range Covering Elements from K Lists
    LeetCode 963. Minimum Area Rectangle II
    LeetCode 939. Minimum Area Rectangle
    LeetCode 727. Minimum Window Subsequence
    LeetCode 844. Backspace String Compare
  • 原文地址:https://www.cnblogs.com/fanszone/p/3532438.html
Copyright © 2011-2022 走看看