Javascript实现div的toggle效果

原文：http://www.cnblogs.com/McJeremy/archive/2008/06/04/1213498.html

JavaScript：

1

<script type="text/javascript" language="javascript">
 2

     function $(obj)
 3

     {
 4

       return document.getElementById(obj);
 5

     }
 6

     function ToggleDiv()
 7

     {
 8

        this.ToggleId='silder'; //被伸缩的对象ID
 9

        this.ParentId='container'; //被伸缩的对象的父ID
10

        this.minHeight=1; //最小高度
11

        this.maxHeight=200; //最大高度
12

        this.speed=1; //伸缩速度
13

        this.offset=0.15; //偏移量
14

        this.load=function()
15

        {
16

           if($(this.ToggleId).style.display=='none') //如果是隐藏的就打开
17

           {
18

               StartToggle('open',this.ToggleId,this.ParentId,this.minHeight,this.maxHeight,this.speed,this.offset);
19

           }
20

           else //如果是打开的就隐藏
21

           {
22

                  StartToggle('close',this.ToggleId,this.ParentId,this.minHeight,this.maxHeight,this.speed,this.offset);
23

           }
24

        }
25

     }
26

     function StartToggle(method,toggleid,parentid,minheight,maxheight,speed,offset)
27

     {
28

        if(typeof(method)!='string' || method.toLowerCase()=='')
29

        {
30

          method='open';
31

        }
32

        if(method.toLowerCase()=='open')
33

        {
34

           var addspeed=speed+offset;
35

           var openfun=function()
36

           {
37

               var originheight=$(toggleid).offsetHeight==0?1:$(toggleid).offsetHeight;
38

               var newheight=originheight+addspeed;
39

               addspeed=addspeed+offset;
40

               if(parseInt(newheight)<parseInt(maxheight))
41

               {               
42

                  $(toggleid).style.height=newheight+'px';                  
43

                  $(toggleid).style.display='block';
44

               }
45

               else if(parseInt(newheight)>=parseInt(maxheight))
46

               {
47

                  $(toggleid).style.height=maxheight+'px';                  
48

                  $(toggleid).style.display='block';
49

                  $(parentid).innerHTML='收缩';
50

                  window.clearInterval(addtimer);
51

               }
52

           }
53

           var addtimer=window.setInterval(openfun,100);
54

        }
55

        else if(method.toLowerCase()=='close')
56

        {
57

            var addspeed=speed+offset;
58

            var reducefunction=function()
59

            {
60

               var originheight=$(toggleid).offsetHeight;
61

               var newheight=originheight-addspeed;
62

               addspeed=addspeed+offset;
63

               if(parseInt(newheight)>parseInt(minheight))
64

               {
65

                  $(toggleid).style.height=newheight+'px';
66

                  $(toggleid).style.display='block';
67

               }
68

               else
69

               {
70

                  $(toggleid).style.display='none';
71

                  $(toggleid).style.height='1px';
72

                   $(parentid).innerHTML='展开';
73

                  window.clearInterval(reducetimer);
74

               }
75

            }
76

           var reducetimer=window.setInterval(reducefunction,100);
77

        }
78

     }
79

     function DoToggle(obj1,obj2)
80

     {
81

        var tog=new ToggleDiv();
82

        tog.ToggleId=obj1;
83

        tog.ParentId=obj2;
84

        tog.minHeight=5;
85

        tog.maxHeight=110;
86

        tog.speed=10;
87

        tog.offset=3;
88

        tog.load();
89

     }
90

  </script>

 1

 <div  style="border:1px dashed blue;width:200px;">
 2

    <h2  id="container" onclick="javascript:DoToggle('silder',this.id);" onmouseover="this.style.cursor='pointer';">展开</h2>
 3

    <div id="silder" style="display:none">
 4

      伸缩效果<br />
 5

      伸缩效果<br />
 6

      伸缩效果<br />
 7

      伸缩效果<br />伸缩效果<br />
 8

      伸缩效果<br />
 9

    </div>
10

  </div>

经验总结：

1、在style.display='none'与style.visibility='hidden'时读取对象的offsetHeight值将会有所不同。

   style.display='none'读出来的，将是 0 ,而style.visibility='hidden'时读取的是对象加载时的offsetHeight,比如 108等。

2、style.height的值并不是整型或number型的，别忘了它是有单位的哦：如 "108px"而不是"108"，而offsetHeight的值是 108.

3、setTimeout和setInterval

   它们都有两种使用方法，以setTimeout为例:

 方法一：setTimeout(function,interval,args)  参数一为函数名或匿名函数，参数2为时间间隔，参数3到N是所调用函数的参数，如下例：

    setTimeout(function(){alert('1');},1000)  setTimeout(GetStr,1000,'McJeremy')

 方法二：setTimeout(object,function,interval) 参数一为调用的对象，参数2为对象中的方法，参数3为时间间隔。

 有个有趣的东东：

 function a()

{

   setTimeout(function(){alert('1');},0);

   alert('2');

}

----猜输出结果是什么？－－－答案： 21 ，而不是12哦。这是因为，JS函数执行也像其它编程语言一样有堆栈的。alert('1')因为有setTimeout,所以最后执行。。。不知道我这样理解对不对。

----打完收功。

<h3>

   心静似高山流水不动，心清若巫峰雾气不沾。

</h3>