IntroJs如何實現突出顯示的區域？

Question

發現了intro.js - 一種非常酷的方式來指導用戶如何使用軟件界面。我深深地看了看源代碼，但想知道是否有人可以簡單地解釋代碼如何實現突出顯示的區域（特別是尺寸/位置/ zindexing）以實現效果。

在此先感謝 周杰倫

鏈接： http://usablica.github.com/intro.js/

Answer 1

好 - 很簡單。

1. 使與寬度/高度100％用z-index覆蓋DIV可以說1000 - 這是與黑色不透明度主要bacground;
2. 做出另一個疊加層，它用z-index突出顯示「step」的特定元素，然後比如說基本覆蓋圖1001 - 這是帶有工具提示容器說明的「white」元素;
3. 終於將頁面中的原始元素設置爲position：relative並且具有最高的z-index（1002）在它們之上。

Answer 2

我是Afshin，Intro.js的作者。讓我介紹一下它是如何工作的。

在聚焦/突出顯示的元素中，發生了兩件不同的事情：
1）製作一個輔助圖層。輔助圖層是聚焦元素中的白色圓角圖層。
2）更改目標元素的z-index和position，以便將元素放在頁面中所有其他元素的前面。

如果目標元素的位置（即，應聚焦在元件/突出顯示）是：

絕對/相對： IntroJs剛剛設定的目標元件z-index到9999999，因此目標元件進入到前的頁面中的所有其他元素。

靜態： 現在，IntroJs目標元素位置設置爲relative然後設置z-index到9999999。

現在，目標元素位於頁面中所有其他元素的前面。所以，最後一步仍然是創建助手元素。

爲了創建輔助層，IntroJs剛剛得到的高度，寬度，頂部和左側目標元素的，然後創建具有introJs-helperLayer類（和位置absolute）一個div並將它附加到所述body。

結論

爲了集中的元件上，IntroJs確實兩個步驟，首先創建一個輔助層（在頁面圓角層），然後使目標元素含量relative以便把它到頁面中所有元素的前面。