jQuery实现画面的展开、收起和停止
程序员文章站
2022-06-05 08:30:50
主要用到动画效果中的三个操作 ("#id").slideDown(3000)； // 后面的数字表示效果的时长 ("#id").stop(); ("#id").slideUp(3000); 代码如下： 1 2 3 4 < ......
主要用到动画效果中的三个操作
("#id").slidedown(3000)； // 后面的数字表示效果的时长
("#id").stop();
("#id").slideup(3000);
代码如下：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>展开和收起</title>
6 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
7 <script>
8 $(document).ready(function(){
9 $("#flip").click(function(){
10 $("#contain").slidedown(3000);
11 });
12 $("#stop").click(function(){
13 $("#contain").stop();
14 });
15 $("#pack-up").click(function(){
16 $("#contain").slideup(3000);
17 });
18 });
19 </script>
20
21 <style>
22
23 html,body{
24 margin: 0;
25 padding: 0;
26 }
27 #main{
28 width: 500px;
29 margin: 0 auto;
30 }
31 #btn>button{
32 border-radius: 4px;
33 font-size: 16px;
34 background: rgb(127, 28, 150);
35 color: rgb(223, 219, 219);
36 outline: none;
37 margin: 10px 0;
38 }
39
40 #panel{
41 width: 300px;
42 color: #eee;
43 font-family: cursive;
44 text-align: center;
45 }
46 #title{
47 background-color: rgb(105, 24, 180);
48 font-size: 20px;
49 }
50 #contain{
51 background-color:blueviolet;
52 padding: 20px auto;
53 }
54 </style>
55 </head>
56 <body>
57 <div id="main">
58 <div id="btn">
59 <button id="flip">展开</button>
60 <button id="stop">停止</button>
61 <button id="pack-up">收起</button>
62 </div>
63 <div id="panel">
64 <div id="title">初恋</div>
65 <div id="contain">当初相遇苹果林，<br>
66 你才挽起少女的发型。<br>
67 前鬓插着如花的彩梳，<br>
68 映衬着你的娟娟玉容。<br><br>
69
70 你脉脉地伸出白净的手，<br>
71 捧起苹果向我相赠。<br>
72 淡红秋实溢清香啊！<br>
73 正如你我的一片初衷。<br><br>
74
75 我因痴情犹入梦境，<br>
76 一声叹息把你的青丝拂动。<br>
77 此时似饮合欢杯啊！<br>
78 杯中斟满了你的恋情。<br><br>
79
80 苹果林中树荫下，<br>
81 何时有了弯弯的小径？<br>
82 心中“宝塔”谁踏基？<br>
83 耳边犹响着你的细语声声……<br><br>
84 </div>
85 </div>
86 </div>
87 </body>
88 </html>
结果：