JavaScript implementation code for simple drawer effect_javascript skills

 

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); //The first parameter: the id of the manipulated div
this.direction = arguments[1];//The second parameter: the direction in which the div pops up
this.height = arguments[2];//The third parameter: the height of the div
this.width = arguments[3]; //The fourth parameter: the width of the div
this.step = arguments[4]; //The fifth parameter: you want the action to be broken down into several steps to complete
this.timer = 10 * arguments[5]; //The sixth parameter: the interval time of each action, 10ms is a unit
this.startopa = arguments[6]; //The seventh parameter: the transparency of the start of the div
this.sparent = this. target.parentNode;//Get the parent container of the operation div
this.intervalid = null;//The id of the loop timing
this.i = 0;//The counter of the loop
this.status = 0; //The status of the slider layer: 0-can be expanded; 1-cannot be expanded
this.target.style.display = "none";//Hide the div first
return this;
}
slider.prototype.initialize = function()
{
this.sparent.style.overflow = "hidden";//Set the 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 positioning method of the target div
this.target.style.display = "";//Set the display method of the target div
this.target.style.filter = 'Alpha( opacity=' Number(this.startopa) ')';//Set the transparency of the target div to the initial transparency
this.target.style.overflow = "hidden";//Set overflow
switch(this.direction )//Set the margin of the div 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 whether the status has been expanded
{
this.initialize();//Operate the initialization of div and its parent container
this.intervalid = window .setInterval("slider.names[" this.id "].cycle()",this.timer);//Set action cycle
}
}
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 action cycle
}
}
slider.prototype.cycle = function() //Single-step cycle action
{
var opa = this.target.style.filter.split("=")[1].split(")")[0]//Get the transparency value of the target div
var opastep = Math.round(((100 - Number(opa)) / this.step) 2.5);//Calculate the transparency increased at each 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) ')';}//Assign a value to div transparency
switch(this.direction)//Calculate and set the action of div 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;} //After the loop, clear the loop timing
}
slider.prototype.decycle = function() //Single-step cycle action
{
var opa = this.target.style.filter.split("=")[1].split(")")[ 0]//Get the transparency value of the target div
var opastep = Math.round(((100 - Number(opa)) / this.step) 2.5)*2;//Calculate the transparency increased at each step
var nopa = Number(opa) - Number(opastep);//Current transparency
if (nopaswitch(this.direction)//根据弹出方向计算和设定div的动作
{
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 //计数器 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";} //循环完毕，清除循环定时
}