我的第七课：jQuery 效果 - 滑动

来源：互联网发布：linux mv命令文件夹编辑：程序博客网时间：2024/06/05 11:12

jQuery 效果向上向下以及切换滑动如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
     <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
     <script type="text/javascript">
          $(document).ready(
              function()
              {
                  $(".flip").click(
                    function()
                    {
                        $(".panel").slideDown("slow");
                    }
                  );
              }
          );
          $(document).ready(
              function()
              {
                $(".into").click(
                    function(){
                      $(".into1").slideUp("slow");
                    }
                );

              }


          );
          $(document).ready(
             function()
             {
                $(".inout").click(
                  function(){
                     $(".inout1").slideToggle();
                  }
                );
             }

          );


     </script>
     <style type="text/css">
          div.panel,div.into1,div.inout1,p.flip,p.into,p.inout{
      margin: 0px;
      padding: 5px;
      text-align: center;
      background: #e5eecc;
      border: solid 1px #c3c3c3;
        }
       div.panel{
           display: none;
           height: 120px;
       }
       div.into1,div.inout1{
          height: 120px;
       }

     </style>


</head>

<body>
        <div class="panel">
            <p>技术站点(一)出来</p>
            <p>技术站点(二)出来</p>
        </div>
        <p class="flip">点击一下就出来</p>
        <p><br>
        <p class="into"> 点击一下就进去</p>
        <div class="into1">
         <p >技术站点(一)进去</p>
         <p >技术站点(二)进去</p>
        </div>
        <p><br>
        <p class="inout">点击一下进去和出来切换</p>
         <div class="inout1">
             <p>技术站点(一)进去和出来</p>
             <p>技术站点(二)进去和出来</p>
         </div>
</body>
</html>

0 0