zoukankan      html  css  js  c++  java
  • 4.28 jQuery 滑动

     jQuery slideDown() 方法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown("slow");
      });
    });
    </script>
     
    <style type="text/css"> 
    #panel,#flip
    {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel
    {
        padding:50px;
        display:none;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>
    
    </body>
    </html>

     jQuery slideUp() 方法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideUp("slow");
      });
    });
    </script>
     
    <style type="text/css"> 
    #panel,#flip
    {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel
    {
        padding:50px;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">点我拉起面板</div>
    <div id="panel">Hello world!</div>
    
    </body>
    </html>

     jQuery slideToggle() 方法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideToggle("slow");
      });
    });
    </script>
     
    <style type="text/css"> 
    #panel,#flip
    {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel
    {
        padding:50px;
        display:none;
    }
    </style>
    </head>
    <body>
     
    <div id="flip">点我,显示或隐藏面板。</div>
    <div id="panel">Hello world!</div>
    
    </body>
    </html>
  • 相关阅读:
    noip2017逛公园
    [noip模拟赛]小U的女装
    AT2364 Colorful Balls
    关于bitset
    [ZJOI2010]排列计数
    [noip模拟赛]午餐
    [noip2017]列队
    [学习笔记]dsu on a tree(如何远离线段树合并)
    luogu4917天守阁的地板
    线性求素数+莫比乌斯函数+欧拉函数模板
  • 原文地址:https://www.cnblogs.com/cdl-sunshine/p/14908253.html
Copyright © 2011-2022 走看看