Css
Copy Code code as follows:
<style type= "Text/css" >
#bodycontainer
{
height:66px;
}
#leftcontainer
{
Background-color: #C5C5C5;
Float:left;
border:1px solid #C5C5C5;
}
</style>
aspx
Copy Code code 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,1,50,85,20,1,20); Leftslider.show (); this.style.display= ' None '; Show (this); " />
<script type= "Text/javascript" >
Function Show (a) {
A.style.display = ' None ';
document.getElementById (a.parentelement.children[2].id). style.display = ';
}
</script>
"Onclick=" var Leftslider = new Slider (this,1,50,85,20,1,20); Leftslider.hide () this.style.display= ' None ';d Ocument.getelementbyid (this.parentelement.children[0].id). style.display= '; "style=" Display:none "/>
</div>
</div>
Slider.js:
Copy Code code as follows:
Slider.names = new Array ();
function Slider ()
{
This.id = Slider.names.length;
Slider.names[this.id] = this;
This.target = document.getElementById (arguments[0].parentelement.parentelement.children[0].id); First argument: ID of the manipulated Div
This.direction = arguments[1];//Second parameter: The direction of the Div popup
This.height = arguments[2];//Third parameter: the height of the div
This.width = arguments[3];//Fourth parameter: width of div
This.step = arguments[4];//Fifth parameter: I want the action to be decomposed into several steps complete
This.timer = ten * arguments[5];//sixth parameter: Interval time for each action, 10ms for one unit
This.startopa = arguments[6];//Seventh parameter: div start transparency
This.sparent = this.target.parentnode;//Gets the parent container of the Operation Div
This.intervalid = null;//Cycle timed ID
this.i = counters for 0;//loops
This.status = 0;//slider Layer Status: 0-can expand; 1-cannot be expanded
This.target.style.display = "none";//First the DIV is hidden
return this;
}
Slider.prototype.initialize = function ()
{
This.sparent.style.overflow = "hidden";/Set Parent container Overflow
This.target.style.width = Number (this.width) + ' px ';//Set the width of the target div
This.target.style.height = Number (this.height) + ' px ';//Set the height of the target div
This.target.style.position = "";//Set the target div positioning mode
This.target.style.display = "";//Set the way the target div is displayed
This.target.style.filter = ' Alpha (opacity= ' + number (This.startopa) + ') ';//Set the transparency of the target div to initial transparency
This.target.style.overflow = "hidden";/Set Overflow
Switch (this.direction)//Set the div margin according to the pop-up direction
{
Case 1://left to right
This.target.style.marginLeft = "-" + this.width + "px";
Break
Case 2://top to bottom
This.target.style.marginTop = "-" + this.height + "px";
Break
Case 3://right to left
This.target.style.marginRight = "-" + this.width + "px";
Break
}
}
Slider.prototype.show = function ()
{
if (this.status==0)//Check status is already expanded
{
This.initialize ()//Operation Div and the initialization of its parent container
This.intervalid = Window.setinterval ("slider.names[" +this.id+ "].cycle ()", this.timer);/Set Action loop
}
}
Slider.prototype.hide = function ()
{
if (this.status==1)//Check status is already expanded
{
This.intervalid = Window.setinterval ("slider.names[" +this.id+ "].decycle ()", this.timer);/Set Action loop
}
}
Slider.prototype.cycle = function ()//Single Step loop action
{
var OPA = this.target.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 increased transparency per step
var Nopa = number (OPA) + number (opastep);/Current transparency
if (nopa>100) {this.target.style.filter = ' Alpha (opacity=100) ';} Else{this.target.style.filter = ' Alpha (opacity= ' + String (nopa) + ') ';} Assigning div Transparency
Switch (this.direction)//To calculate and set the div action according to the pop-up direction
{
Case 1://left to right
var opx = this.target.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.target.style.marginLeft = ' 0px ';} Else{this.target.style.marginleft = String (npx) + ' px ';}
Break
Case 2://top to bottom
var opx = this.target.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.target.style.marginTop = ' 0px ';} Else{this.target.style.margintop = String (npx) + ' px ';}
Break
Case 3://right to Left
var opx = this.target.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.target.style.marginRight = ' 0px ';} Else{this.target.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;}//loop complete, clear cycle timing
}
Slider.prototype.decycle = function ()//Single Step loop action
{
var OPA = this.target.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 increased transparency per step
var Nopa = number (OPA)-Number (opastep);/Current transparency
if (nopa<this.startopa) {this.target.style.filter = ' Alpha (opacity= ' + This.startopa + ') ';} Else{this.target.style.filter = ' Alpha (opacity= ' + String (nopa) + ') ';} Assigning div Transparency
Switch (this.direction)//To calculate and set the div action according to the pop-up direction
{
Case 1://left to right
var opx = this.target.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.target.style.marginLeft = '-' + this.width + ' px ';} Else{this.target.style.marginleft = String (npx) + ' px ';}
Break
Case 2://top to bottom
var opx = this.target.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.target.style.marginTop = '-' + this.height + ' px ';} Else{this.target.style.margintop = String (npx) + ' px ';}
Break
Case 3://right to Left
var opx = this.target.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.target.style.marginRight = '-' + this.width + ' px ';} Else{this.target.style.marginright = String (npx) + ' px ';}
Break
}
this.i++//Counter +1
if (this.i> (Math.Round (this.step*0.5)-1)) {window.clearinterval (this.intervalid); this.i=0;this.status=0; This.target.style.display = "None";} Cycle complete, clear cycle timing
}
