シンプルなドロワーの JavaScript 実装コードeffect_javascript スキル

css

复制代码代码如下:

aspx:

复制代 代码如下:

< ;div id="ボディコンテナ">

<%#hiSoft.AMS.BLL.BAssetAlteration.getActionLinksString(Eval("ID"), g_Sites, g_Permission)%>

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";} //循環完毕，清除循環环定時
}

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。