Implementation Code of javascript simple drawer Effect

Css
Copy codeThe Code is as follows:
<Style type = "text/css">
# Bodycontainer
{
Height: 66px;
}
# Leftcontainer
{
Background-color: # C5C5C5;
Float: left;
Border: 1px solid # C5C5C5;
}
</Style>

Aspx:
Copy codeThe Code is as follows:
<Div id = "bodycontainer">
<Div id = "leftcontainer + <% # Container. ItemIndex + 1%>" style = "display: none;">
<% # HiSoft. AMS. BLL. BAssetAlteration. getActionLinksString (Eval ("ID"), g_Sites, g_Permission) %>
</Div>
<Div>
"onclick =" var leftslider = new slider (this, 20,); leftslider. show (); this. style. display = 'none'; Show (this); "/>
<Script type = "text/javascript">
Function Show (){
// A. style. display = 'none ';
Document. getElementById (a. parentElement. children [2]. id). style. display = '';
}
</Script>
"onclick =" var leftslider = new slider (this, 20,); leftslider. hide (); this. style. display = 'none'; document. getElementById (this. parentElement. children [0]. id ). style. display = '';" style = "display: none"/>
</Div>
</Div>


Slider. js:
Copy codeThe Code is as follows:
Slider. names = new Array ();
Function slider ()
{
This. id = slider. names. length;
Slider. names [this. id] = this;
This.tar get = document. getElementById (arguments [0]. parentElement. parentElement. children [0]. id); // The first parameter is the id of the operated div.
This. direction = arguments [1]; // The second parameter is the orientation of the div pop-up.
This. height = arguments [2]; // third parameter: div height
This. width = arguments [3]; // fourth parameter: div width
This. step = arguments [4]; // The Fifth parameter: You want the action to be decomposed into several steps.
This. timer = 10 * arguments [5]; // The sixth parameter: interval of each action. 10 ms is a unit.
This. startopa = arguments [6]; // The Seventh parameter is the transparency of the start of the div.
This. sparent = this.tar get. parentNode; // gets the parent container of the Operation div.
This. intervalid = null; // the id of the cyclic timing.
This. I = 0; // counter of the loop
This. status = 0; // The status of the slider layer: 0-can be expanded; 1-cannot be expanded.
This.tar get. style. display = "none"; // first hide the div
Return this;
}
Slider. prototype. initialize = function ()
{
This. sparent. style. overflow = "hidden"; // sets the parent container overflow.
This.tar get. style. width = Number (this. width) + 'px '; // you can specify the width of the target div.
This.tar get. style. height = Number (this. height) + 'px '; // you can specify the height of the target div.
This.tar get. style. position = ""; // you can specify the target div.
This.tar get. style. display = ""; // sets the display mode of the target div.
This.tar get. style. filter = 'Alpha (opacity = '+ Number (this. startopa) +') '; // sets the transparency of the target div to the initial transparency.
This.tar get. style. overflow = "hidden"; // set overflow
Switch (this. direction) // set the div's margin according to the pop-up direction
{
Case 1: // left to right
This.tar get. style. marginLeft = "-" + this. width + "px ";
Break;
Case 2: // top to bottom
This.tar get. style. marginTop = "-" + this. height + "px ";
Break;
Case 3: // right to left
This.tar get. style. marginRight = "-" + this. width + "px ";
Break;
}
}
Slider. prototype. show = function ()
{
If (this. status = 0) // check whether the status has been expanded
{
This. initialize (); // operation div and its parent container Initialization
This. intervalid = window. setInterval ("slider. names [" + this. id + "]. cycle ()", this. timer); // set the action Loop
}
}
Slider. prototype. hide = function ()
{
If (this. status = 1) // check whether the status has been expanded
{
This. intervalid = window. setInterval ("slider. names [" + this. id + "]. decycle ()", this. timer); // set the action Loop
}
}
Slider. prototype. cycle = function () // One-Step cyclic action
{
Var opa = this.tar get. style. filter. split ("=") [1]. split (")") [0] // gets the transparency value of the target div
Var opastep = Math. round (100-Number (opa)/this. step) + 2.5); // calculate the transparency of each step
Var nopa = Number (opa) + Number (opastep); // current transparency
If (nopa> 1001_1_this.tar get. style. filter = 'alpha(opacity0000100}'%%else%this.tar get. style. filter = 'Alpha (opacity = '+ String (nopa) +') ';} // assign a value to the div transparency
Switch (this. direction) // calculate and set the div action based on the pop-up direction
{
Case 1: // left to right
Var opx = this.tar get. style. marginLeft. split ("px") [0];
Var pxstep = Math. round (this. width/this. step) + 0.5 );
Var npx = Number (opx) + Number (pxstep );
If (npx> 0)%this.tar get. style. marginLeft = '0px'%else%this.tar get. style. marginLeft = String (npx) + 'px ';}
Break;
Case 2: // top to bottom
Var opx = this.tar get. style. marginTop. split ("px") [0];
Var pxstep = Math. round (this. height/this. step) + 0.5 );
Var npx = Number (opx) + Number (pxstep );
If (npx> 0)%this.tar get. style. marginTop = '0px'%else%this.tar get. style. marginTop = String (npx) + 'px ';}
Break;
Case 3: // right to left
Var opx = this.tar get. style. marginRight. split ("px") [0];
Var pxstep = Math. round (this. width/this. step) + 0.5 );
Var npx = Number (opx) + Number (pxstep );
If (npx> 0)%this.tar get. style. marginRight = '0px'%else%this.tar get. style. marginRight = String (npx) + 'px ';}
Break;
}
This. I ++ // counter + 1
If (this. i> (this. step-1) {window. clearInterval (this. intervalid); this. I = 0; this. status = 1;} // After the cycle is completed, clear the cycle
}
Slider. prototype. decycle = function () // One-Step cyclic action
{
Var opa = this.tar get. style. filter. split ("=") [1]. split (")") [0] // gets the transparency value of the target div
Var opastep = Math. round (100-Number (opa)/this. step) + 2.5) * 2; // calculate the transparency of each step
Var nopa = Number (opa)-Number (opastep); // current transparency
If (nopa <this.startopa)incluthis.tar get. style. filter = 'Alpha (opacity = '+ this. startopa + '{'{else}this.tar get. style. filter = 'Alpha (opacity = '+ String (nopa) +') ';} // assign a value to the div transparency
Switch (this. direction) // calculate and set the div action based on the pop-up direction
{
Case 1: // left to right
Var opx = this.tar get. style. marginLeft. split ("px") [0];
Var pxstep = Math. round (this. width/Math. round (this. step * 0.5) + 0.5 );
Var npx = Number (opx)-Number (pxstep );
If (Math. abs (npx)> this.width%2%%%this.tar get. style. marginLeft = '-' + this. width + 'px'{else}this.tar get. style. marginLeft = String (npx) + 'px ';}
Break;
Case 2: // top to bottom
Var opx = this.tar get. style. marginTop. split ("px") [0];
Var pxstep = Math. round (this. height/Math. round (this. step * 0.5) + 0.5 );
Var npx = Number (opx)-Number (pxstep );
If (Math. abs (npx)> this.height%2%%%this.tar get. style. marginTop = '-' + this. height + 'px'{else}this.tar get. style. marginTop = String (npx) + 'px ';}
Break;
Case 3: // right to left
Var opx = this.tar get. style. marginRight. split ("px") [0];
Var pxstep = Math. round (this. width/Math. round (this. step * 0.5) + 0.5 );
Var npx = Number (opx)-Number (pxstep );
If (Math. abs (npx)> this.width%2%%%this.tar get. style. marginRight = '-' + this. width + 'px'{else}this.tar get. style. marginRight = String (npx) + 'px ';}
Break;
}
This. I ++ // counter + 1
If (this. I> (Math. round (this. step * contains get. style. display = "none";} // the cycle is completed, and the cycle is cleared.
}