Home > Developer > JavaScript
Specifically as follows:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101-102 | <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > <html> <head> <base href= "<%=basepath %> "> <meta http-equiv=" pragma "content=" No-cache "> <meta http-equiv=" Cache-control "content=" No-cache "> <meta http-equiv=" Expires "content=" 0 "> <meta http-equiv=" keywords "content=" keyword1,keyword2, Keyword3 "> <meta http-equiv=" description "content=" This are my page "> <!--<link rel=" stylesheet "type=" Text/css "href=" Styles.css ">--> <title> Cool div layer expansion contraction effect </title> <style> * {margin:0; padding:0 ;} body {text-align:center; font:75% Verdana, Arial, Helvetica, Sans-serif;} h1 {font:125% Arial, Helvetica, Sans-serif; t Ext-align:left; Font-weight:bolder; Background: #333; padding:3px; Display:block; Color: #99CC00}. Class1 {width:40% background: #CCC; position:relative; margin:0 auto; padding:5px;} span {POSITION:ABSO lute; right:10px; top:8px; Cursor:pointer; Color:yellow; } p {text-align:left; line-height:20px; Background: #333; padding:3px; margin-top:5px; Color: #99CC00} #class1content {Height:300px;overflow:hidden} </style> <script> function $ (element) { return element = document.getElementById (element); function $D () {var d=$ (' class1content '); var h=d.offsetheight; var maxh=300; function Dmove () {h+=50;//Set the speed of the layer expansion if (H> =MAXH) {d.style.height= ' 300px '; clearinterval (iintervalid);} else{d.style.display= ' block '; d.style.height=h+ ' px ';} Iintervalid=setinterval (dmove,2); Function $D 2 () {var d=$ (' class1content '); var h=d.offsetheight; var maxh=300; function Dmove () {h-=50;//Sets the speed of the layer to shrink if (h< ; =0) {d.style.display= ' none '; clearinterval (iintervalid);} else{d.style.height=h+ ' px ';} Iintervalid=setinterval (dmove,2); function $use () {var d=$ (' class1content '); var sb=$ (' statebut '); if (d.style.display== ' None ') {$D (); sb.innerhtml= ' shrink ' ; }else{$D 2 (); sb.innerhtml= ' expand ';}} </script> </head> <body> <div class= "Class1" > <h1>div layer of the unfolding hidden effect </h1> <span id= "statebut" onclick= "$use ()" > Expand </span> <p id= "Class1content" > Once there was a sincere love in front of me, <br> I did not cherish,<br> and so I lost when I regret, <br> the most painful thing in the world than this. <br> If God can give me a chance to come again, <br> I will say three words to that girl:<br> I love you. <br> If you have to add a deadline in this love, <br> I hope it is ... 10,000 years! "</div> </body> </html> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
