龙行博客

龙行博客,致力于个人经验分享源码分享,随笔文章
现在位置:首页 > 编程语言 > web前端 > jQuery实现画面的展开、收起和停止

jQuery实现画面的展开、收起和停止

龙行    web前端    2018-11-13    57    0评论    百度未收录

主要用到动画效果中的三个操作

("#id").slideDown(3000); // 后面的数字表示效果的时长
("#id").stop();
("#id").slideUp(3000);
 

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展开和收起</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#contain").slideDown(3000);
        });
        $("#stop").click(function(){
            $("#contain").stop();
        });
        $("#pack-up").click(function(){
            $("#contain").slideUp(3000);
        });
    });
    </script>
     
    <style>
        
        html,body{
            margin: 0;
            padding: 0;
        }
        #main{
            width: 500px;
            margin: 0 auto;
        }
        #btn>button{
             border-radius: 4px;
             font-size: 16px;
             background: rgb(127, 28, 150);
             color: rgb(223, 219, 219);
             outline: none;
             margin: 10px 0;
        }

        #panel{
            width: 300px;
            color: #eee;
            font-family: cursive;
            text-align: center;
        }
       #title{
           background-color: rgb(105, 24, 180);
           font-size: 20px;
       }
        #contain{
         background-color:blueviolet; 
         padding: 20px auto;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="btn">
            <button id="flip">展开</button>
            <button id="stop">停止</button>
            <button id="pack-up">收起</button>
        </div>
        <div id="panel">
            <div id="title">初恋</div>
            <div id="contain">当初相遇苹果林,<br>
            你才挽起少女的发型。<br>
                前鬓插着如花的彩梳,<br>
                映衬着你的娟娟玉容。<br><br>
                
                你脉脉地伸出白净的手,<br>
                捧起苹果向我相赠。<br>
                淡红秋实溢清香啊!<br>
                正如你我的一片初衷。<br><br>
                
                我因痴情犹入梦境,<br>
                一声叹息把你的青丝拂动。<br>
                此时似饮合欢杯啊!<br>
                杯中斟满了你的恋情。<br><br>
                
                苹果林中树荫下,<br>
                何时有了弯弯的小径?<br>
                心中“宝塔”谁踏基?<br>
                耳边犹响着你的细语声声……<br><br>
            </div>
        </div>
    </div>
</body>
</html>
123


评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/83.html
  • 上篇文章:jQuery实现全选,反选,全不选
  • 下篇文章:实现微信分享功能
  • js
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部