Div folding Effect

[Instance description]

The collapsed div is an important means of displaying content on a webpage, because the folding effect can save space on the page and improve the page aesthetics. This example describes how to create a simple Div folding effect.

[ImplementationCode]

<SCRIPT type = "text/JavaScript">

VaR MH = 30; // minimum height

VaR step = 1; // The amount of PX changed each time

VaR MS = 10; // The number of cycles per second

// How to set the folding speed

Function toggle (o ){

If (! O. TID) O. tid = "_" + math. Random () * 100;

If (! Window. toggler) window. toggler = {};

If (! Window. toggler [O. TID]) {

Window. toggler [O. TID] = {

OBJ: O,

Maxheight: O. offsetheight,

Minheight: MH,

Timer: NULL,

Action: 1

};}

O. style. Height = O. offsetheight + "PX ";

If (window. toggler [O. TID]. Timer) cleartimeout (window. toggler [O. TID]. Timer );

Window. toggler [O. TID]. Action * =-1;

Window. toggler [O. TID]. Timer = setTimeout ("anim ('" + O. TID + "')", MS); // pay attention to timer usage

}

// Determine whether to stop the folding based on the minimum and maximum heights of the object

Function anim (ID ){

VaR T = Window. toggler [ID];

VaR o = Window. toggler [ID]. OBJ;

If (T. Action <0 ){

If (O. offsetheight <= T. minheight ){

Cleartimeout (T. Timer );

Return;

}

}

Else {

If (O. offsetheight> = T. maxheight ){

Cleartimeout (T. Timer );

Return;

}

}

O. style. Height = (parseint (O. style. Height, 10) + T. Action * step) + "PX ";

Window. toggler [ID]. Timer = setTimeout ("anim ('" + ID + "')", MS );

}

</SCRIPT>

[Running Effect]

The DIV folding effect is 5-4, and the expansion effect is 5-5.

Figure 5-4 Div fold effect Figure 5-5 Div expand Effect

[Difficulties]

In this example, the focus is on Object creation. For example, "toggler" is an object created by yourself. It contains OBJ, maxheight, and other attributes. You can call these attributes in the script method, this implementation is similar to the object-oriented design method.