純粋な js_javascript スキルを使用したマスク レイヤー効果の原理の分析

前回の「Snake」を理解した後では、この機能は最初に想像していた困難とは大きく異なっていると言えます。もちろん、この方法は少し難しいですが、結局のところ、それを分析してみましょう。 .

の構成 1. 実装原理

この記事の実装原理は次のとおりです:

* 実際には、ポップアップ レイヤーは、マスクレイヤーと元のページ 表示は 3 つの異なる div に分割されます

* ポップアップレイヤーのレベルはマスクレイヤーの上にあり、マスクレイヤーのレベルは元のページ表示の上にあります。 >
* マスクレイヤーには透明効果があります

* マスクレイヤーには実質的な意味はないので、html部分に記述する必要はありません もちろん、記述することで実現することも可能です。


2. コードの実装
HTML 言語は次のとおりです:

コードをコピーします コードは次のとおりです:

....

< div id="alert" style="display:none;">

ログイン

;input type="password">

JavaScript はポップアップ レイヤーとマスク レイヤーを実装します。 >

コードをコピー

コードは次のとおりです: function show(){ varalertPart=document.getElementById("alert");

alertPart.style.display="block";

alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px"; = "-150px";
alertPart.style.width="300px";
alertPart.style.height="200px"; style.zIndex = "501";

var mybg = document.createElement("div");
mybg.setAttribute("id","mybg"); = "#000";
mybg.style.width = "100%";
mybg.style.position = "絶対"; mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.opacity = "0.3"; 🎜>mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);

document.body.style.overflow = "hidden"; }



ここでは、レベル、不透明度、フィルターを区別するために Z インデックスが使用されます: alpha (opacity=) 透明度、document.createElement("div) ") と document.body.appendChild() はすべて以前に登場し、適用されているので、それを実現できます。実際、原理を理解すると、すべてがはるかに簡単になります。

道は長いです。