DIV显示隐藏效果

1. <html>
   
2. <head>
   
3. <title>div动画显示</title>
   
4. <style>
   
5. * { margin:0; padding:0;}
   
6. body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
   
7. h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
   
8. .class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
   
9. span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
   
10. p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
    
11. #class1content { height:300px;overflow:hidden}
    
12. </style>
    
13. <script>
    
14. function $(element){
    
15. return element = document.getElementById(element);
    
16. }
    
17. function $D(){
    
18. var d=$('class1content');
    
19. var h=d.offsetHeight;
    
20. var maxh=300;
    
21. function dmove(){
    
22. h+=50; //设置层展开的速度
    
23. if(h>=maxh){
    
24. d.style.height='300px';
    
25. clearInterval(iIntervalId);
    
26. }else{
    
27. d.style.display='block';
    
28. d.style.height=h+'px';
    
29. }
    
30. }
    
31. iIntervalId=setInterval(dmove,2);
    
32. }
    
33. function $D2(){
    
34. var d=$('class1content');
    
35. var h=d.offsetHeight;
    
36. var maxh=300;
    
37. function dmove(){
    
38. h-=50;//设置层收缩的速度
    
39. if(h<=0){
    
40. d.style.display='none';
    
41. clearInterval(iIntervalId);
    
42. }else{
    
43. d.style.height=h+'px';
    
44. }
    
45. }
    
46. iIntervalId=setInterval(dmove,2);
    
47. }
    
48. function $use(){
    
49. var d=$('class1content');
    
50. var sb=$('stateBut');
    
51. if(d.style.display=='none'){
    
52. $D();
    
53. sb.innerHTML='展开';
    
54. }else{
    
55. $D2();
    
56. sb.innerHTML='收缩';
    
57. }
    
58. }
    
59. </script>
    
60. </head>
    
61. <body>
    
62. <div class="class1">
    
63. <h1>Alone展开隐藏效果</h1>
    
64. <span id="stateBut" onclick="$use()">展开</span>
    
65. <p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
    
66. 妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
    
67. 小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
    
68. 妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。 <br />
    
69. 小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
    
70. 妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
    
71. 小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。 <br />
    
72. 蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
    
73. </div>
    
74. </body>
    
75. </html>

复制代码