간단한 서랍 effect_javascript 기술을 위한 JavaScript 구현 코드

css

复代码 代码如下:

aspx:

复代码 代码如下:

< ;div id="bodycontainer">

 

slider.js:

复代码 代码如下:

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); //첫 번째 매개변수: 조작된 div의 ID
this.direction = 인수[1];//두 번째 매개변수: div가 나타나는 방향
this.height = 인수[2];//세 번째 매개변수: div의 높이
this.width = 인수 [3]; //네 번째 매개변수: div의 너비
this.step = 인수[4]; //다섯 번째 매개변수: 작업을 여러 단계로 나누어 완료합니다.
.timer = 10 * 인수[5]; //6번째 매개변수: 각 동작의 간격, 10ms는 단위입니다.
this.startopa = 인수[6] //7번째 매개변수: 시작의 ​​투명도 of the div
this.sparent = this.target.parentNode;//작업 div의 상위 컨테이너 가져오기
this.intervalid = null;//루프 타이밍의 ID
this.i = 0;//루프 카운터
this.status = 0; //슬라이더 레이어 상태: 0-확장 가능; 1-확장 불가능
this.target.style.display = " none";//먼저 div 숨기기
return this;
}
slider.prototype.initialize = function()
{
this.sparent.style.overflow = "hidden"; //상위 컨테이너 오버플로 설정
this.target.style.width = Number(this .width) 'px';//대상 div의 너비 설정
this.target.style.height = Number( this.height) 'px';//타겟 div의 높이 설정
this.target.style .position = "";//타겟 div의 위치 지정 방법 설정
this.target.style. display = "";//대상 div의 표시 방법 설정
this.target.style.filter = 'Alpha( opacity=' Number(this.startopa) ')';//대상의 투명도 설정 div를 초기 투명도로 설정
this.target.style.overflow = "hidden";//오버플로 설정
switch(this.direction )//팝업 방향에 따라 div의 여백 설정
{
case 1://왼쪽에서 오른쪽으로
this.target.style.marginLeft = "-" this.width "px"
break
case 2://위에서 아래로
this.target.style.marginTop = "-" this.height "px";
break
case 3://오른쪽에서 왼쪽으로
this.target.style.marginRight = "- " this.width "px";
break;
}
}
slider.prototype.show = function()
{
if (this.status==0)/ /상태가 확장되었는지 확인
{
this.initialize();//div 및 상위 컨테이너 초기화 작업
this.intervalid = window .setInterval("slider.names[" this .id "].cycle()",this.timer);//작업 주기 설정
}
}
slider.prototype.hide = function()
{
if (this .status==1)//상태 확장 여부 확인
{
this.intervalid = window.setInterval("slider.names[" this.id "].decycle()",this.timer );//작업 주기 설정
}
}
slider.prototype.cycle = function() //단일 단계 주기 작업
{
var opa = this.target.style. filter.split("=")[1].split(")")[0]//대상 div의 투명도 값을 가져옵니다
var opastep = Math.round(((100 - Number(opa)) / this.step) 2.5);//각 단계에서 증가된 투명도 계산
var nopa = Number(opa) Number(opastep);//현재 투명도
if (nopa>100){ this.target. style.filter = 'Alpha(opacity=100)';}else{this.target.style.filter = 'Alpha(opacity=' String(nopa) ')';}//div 투명도에 값 할당
switch(this.direction)//팝업 방향에 따라 div의 동작을 계산하고 설정합니다
{
case 1: //왼쪽에서 오른쪽으로
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
사례 2 : / /위에서 아래로
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;
사례 3: //오른쪽에서 왼쪽으로
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 //카운터 1
if ( this.i>(this.step-1)){window.clearInterval(this.intervalid);this.i=0;this.status=1;} //루프 후 루프 타이밍을 지웁니다
}
Slider.prototype.decycle = function() //단일 단계 주기 동작
{
var opa = this.target.style.filter.split("=")[1].split( ")")[ 0]//대상 div의 투명도 값을 가져옵니다
var opastep = Math.round(((100 - Number(opa)) / this.step) 2.5)*2;//계산 각 단계에서 투명도 증가
var nopa = Number(opa) - Number(opastep);//현재 투명도
if (nopaswitch(this.direction)//根据弹分向计算와设定divative动작
{
case 1: //왼쪽에서 오른쪽으로
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 = 숫자(opx) - 숫자(pxstep);
if (Math.abs(npx)>this.width 2){this.target.style.marginLeft = '-' this.width 'px';}else{this.target.style.marginLeft = String( npx) 'px';}
break;
사례 2: //위에서 아래로
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 = 숫자(opx) - 숫자(pxstep);
if (Math.abs(npx)>this.height 2){this.target.style.marginTop = '-' this.height 'px';}else{this.target.style.marginTop = String( npx) 'px';}
break;
사례 3: //오른쪽에서 왼쪽으로
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 = 숫자(opx) - 숫자(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";} //循环完毕，清除循环정정时
}