intro.jsに出くわしました-ソフトウェアインターフェースの使用方法についてユーザーをガイドする非常にクールな方法です。私はソースを詳細に調べたことがありませんが、効果を達成するために強調表示された領域（具体的には寸法/位置/ zindexing）を達成するためにコードが何をするかを誰かが簡単に説明できるかどうか疑問に思いました。
よろしくお願いしますジェイ
リンク： http： //usablica.github.com/intro.js/
4370 次
2 に答える
34
Intro.js の作者、Afshin です。実際にどのように動作するかを紹介します。
フォーカス/ハイライトされた要素では、2 つの別々のことが起こり
ました: 1) ヘルパー レイヤーを作成します。ヘルパー レイヤーは、フォーカスされた要素の白い角の丸いレイヤーです。
2)ページ内の他のすべての要素の前に要素を移動するために、ターゲット要素を変更しますz-index。position
ターゲット要素 (フォーカス/ハイライトする必要がある要素) の位置が次の場合:
Absolute/Relative : IntroJs はターゲット要素z-indexを9999999に設定するだけなので、ターゲット要素はページ内の他のすべての要素の前に移動します。
Static : これで、IntroJs はターゲット要素の位置をに設定しrelative、次に を に設定z-indexし9999999ます。
現在、ターゲット要素はページ内の他のすべての要素の前にあります。残りの最後のステップは、ヘルパー要素を作成することです。
ヘルパー レイヤーを作成するために、IntroJs はターゲット要素の高さ、幅、上端、左端を取得し、divwith クラスintroJs-helperLayer(および position absolute) を作成し、それをbody.
結論
要素に焦点を当てるために、IntroJs は 2 つのステップを実行します。最初にヘルパー レイヤー (ページ内の角の丸いレイヤー) を作成し、次にターゲット要素のコンテンツrelativeを作成して、ページ内のすべての要素の前に表示します。
于 2013-03-22T19:44:41.723 に答える