シンプルなドロワーの JavaScript 実装コードeffect_javascript スキル-jsチュートリアル-php.cn

シンプルなドロワーの JavaScript 実装コードeffect_javascript スキル
WBOY
リリース： 2016-05-16 18:32:58
オリジナル
1906 人が閲覧しました
css
复制代码代码如下:
aspx:
复制代代码如下:
< ;div id="ボディコンテナ">
slider.js:
复制代码代码如下:
 
slider.names = new Array(); 
関数 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 = argument[1];//2 番目のパラメータ: div がポップアップする方向
this.height = argument[2];//3 番目のパラメータ: div の高さ
this.width = argument [3]; // 4 番目のパラメータ: div の幅 
this.step = argument[4] // 5 番目のパラメータ: アクションを複数のステップに分割して実行する 
this; .timer = 10 * argument[5]; //6 番目のパラメータ: 各アクションの間隔時間、10 ミリ秒が単位です 
this.startopa = argument[6]; //7 番目のパラメータ: 開始の透明度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 のマージンを設定します 
{ 
ケース 1://左から右へ 
this.target.style.marginLeft = "-" this.width "px" 
 ケース 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; 
case 3: //右から左へ 
var opx = this.target.style.marginRight.split("px")
 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)//出射方向に基づく計算と設定divの動作 
{ 
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";} //循環完毕，清除循環环定時 
} 