IntroJsはどのように強調表示された領域を達成していますか？

Question

intro.jsを訪れました。ソフトウェアインターフェイスの使い方をユーザーに案内する非常にクールな方法です。私はソースを深く見ていましたが、効果を達成するために強調表示された領域（具体的には次元/位置/ zindexing）を達成するためにコードが何をしているか簡単に説明できるかどうか疑問に思っていました。事前に

おかげ ジェイ

リンク：http://usablica.github.com/intro.js/

Answer 1

まあ - 非常にシンプル。

1. 幅と高さを100％とし、zインデックスを1000とすると、オーバーレイのdivを作成します。これは黒の不透明度を持つ主な背景です。
2. 「ステップ」の特定の要素をz-インデックスで強調表示する別のオーバーレイを作成します。さらに、ベースオーバーレイを1001とします。これはツールチップコンテナの説明を含む「白い」要素です。
3. 最終的にページの元の要素をposition：relative、最も高いz-インデックス（1002）に設定してください。

Answer 2

私は、Intro.jsの著者Afshinです。実際にどのように動作するかをご紹介します。

フォーカスされた/強調表示された要素では、2つの別々のものが発生します。
1）ヘルパーレイヤを作成します。ヘルパーレイヤーは、フォーカスされた要素の白い丸いコーナーレイヤーです。
2）対象要素のz-indexとpositionを変更し、要素をページ内の他のすべての要素の前に移動させます。

ターゲット要素の位置は、（集中しなければならない要素は/強調表示）の場合：相対/

絶対： IntroJsはちょうど9999999にターゲット要素z-indexを設定し、そのターゲット要素が前面に行きますページ内の他のすべての要素の静的

： 今、IntroJsはrelativeにターゲット要素の位置を設定し、9999999にz-indexを設定します。

ここで、ターゲット要素はページ内の他のすべての要素の前にあります。したがって、最後のステップが1つ残っているので、ヘルパー要素を作成してください。

ヘルパー層を作成するため、IntroJsは単にターゲット要素の高さ、幅、上および左を取得し、クラスintroJs-helperLayer（及び位置absolute）とdivを作成し、bodyに追加します。

結論

要素に焦点を当てるために、IntroJsは、最初にそれをもたらすためにターゲット要素のコンテンツrelativeを行い、その後ヘルパー層（ページ内の丸い角層）を作成して、2つのステップを行いページ内のすべての要素の前に移動します。