程序博客网 > 咸宁软件开发

jquery 上下滑动flip演示

来源：互联网发布：咸宁软件开发编辑：程序博客网时间：2024/04/30 00:00

1.布局：

<body>
    <div class="panel">
        <p>当前是单击进行滑动显示功能</p>
        <p>进行单击按钮展现测试滑动信息</p>
    </div>
      <p class="flip">单击这里进行测试</p>
</body>

2.css设置：

<style type="text/css">
        div.panel, p.flip
        {
           margin:0px;
           padding:5px;
            background-color:pink;
            text-align:center;
            border:solid 1px #b6ff00;
        }
        div.panel
        {
            width:280px;
            height:200px;
            display:none;
        }
        p.flip
        {
            width:280px;
            height:10px;
        }

3.js函数

<script>
        $(document).ready(function () {
            $(".flip").click(function () {
                $(".panel").slideToggle(4000);--4000即4s进行展现或者隐藏
            });
        });

5:全部代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="Script/jquery-1.7.1.js"></script>
    <title></title>
    <script>
        $(document).ready(function () {
            $(".flip").click(function () {
                $(".panel").slideToggle(4000);
            });
        });

    </script>
    <style type="text/css">
        div.panel, p.flip
        {
           margin:0px;
           padding:5px;
            background-color:pink;
            text-align:center;
            border:solid 1px #b6ff00;
        }
        div.panel
        {
            width:280px;
            height:200px;
            display:none;
        }
        p.flip
        {
            width:280px;
            height:10px;
        }
    </style>
</head>
<body>
    <div class="panel">
        <p>当前是单击进行滑动显示功能</p>
        <p>进行单击按钮展现测试滑动信息</p>
    </div>
      <p class="flip">单击这里进行测试</p>
</body>
</html>

0 0

咸宁软件开发

咸宁软件开发

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子山药煮粥的做法红枣山药莲子粥百合山药粥的做法大全红豆薏米山药粥宝宝山药粥的做法大全薏米芡实山药粥的功效山药瘦肉粥的做法山药芡实薏米粥功效山药紫薯粥的做法绿豆山药粥的功效山药粥的家常做法红枣山药粥的功效山药红枣粥的功效薏米红豆粥的比例薏米粥怎么煮薏苡仁粥薏米粥怎么做山药熬粥的做法山药排骨粥的做法红豆山药粥薏米山药粥山药玉米粥山药熬粥山药粥的做法大全家常红豆薏仁粥的做法孕妇红豆薏米孕妇孕妇薏米红豆薏米孕妇可以吃吗南瓜薏仁粥紫米薏仁粥红豆薏仁粥薏仁粥孕妇能喝红豆薏米粥吗孕妇能吃红豆薏米粥吗孕妇可以吃红豆薏米粥吗山药点心的做法大全山药红枣糕山药红豆糕山药糯米糕红豆山药糕