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以便把它到页面中所有元素的前面。