Implementation Code of javascript simple drawer Effect

Source: Internet
Author: User

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.
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.