zoukankan      html  css  js  c++  java
  • jQuery效果-滑动

    index.html

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6    <script src="jquery-3.1.0.min.js"></script>
     7    <script src="myjs3.js"></script>
     8    <style>
     9       #content,#flipshow,#fliphide,#fliptoggle{
    10          padding:5px;
    11          text-align:center;
    12          background-color: #ece023;
    13          border:solid 1px #ece999;
    14       }
    15       #content{
    16          padding:50px;
    17          display:none;
    18       }
    19    </style>
    20 </head>
    21 <body>
    22     
    23     <div id="flipshow">出现</div><!-- 点击滑动出现 -->
    24     <div id="fliphide">隐藏</div><!-- 点击滑动隐藏 -->
    25     <div id="fliptoggle">隐藏/出现</div><!-- 点击滑动隐藏/出现 -->
    26     <div id="content">Hello world</div>
    27     
    28 </body>
    29 </html>

    js代码:

     1 $(document).ready(function(){
     2     $("#flipshow").click(function(){//点击滑动出现
     3         $("#content").slideDown(1000);
     4     });
     5     
     6     $("#fliphide").click(function(){//点击滑动隐藏
     7         $("#content").slideUp(1000);
     8     });
     9     
    10     $("#fliptoggle").click(function(){//点击滑动隐藏/出现
    11         $("#content").slideToggle(1000);
    12     });
    13 });
  • 相关阅读:
    spring学习(一)IOC&AOP
    MongoDB 写入数据的安全性
    MongoDB MapReduce
    MongoDB 原子操作
    MongoDB 文档间的关系
    MongoDB Java
    MongoDB 持久化
    MongoDB 聚合函数 aggregate
    MongoDB 索引
    MongoDB 文档操作
  • 原文地址:https://www.cnblogs.com/UniqueColor/p/5762312.html
Copyright © 2011-2022 走看看