IntroJs如何实现突出的领域？

Question

遇到intro.js - 一种指导用户如何使用软件界面的非常酷的方式。我深入研究了源代码，但是想知道是否有人可以简单地解释代码实现突出显示的区域（特别是尺寸/位置/ zindexing）以实现效果。

提前致谢 杰

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

Answer 1

我是Afshin，Intro.js的作者。让我向您介绍它实际上是如何工作的。

在聚焦/突出显示的元素中，发生了两件不同的事情：
1）制作一个辅助层。辅助层是聚焦元素中的白色圆角层 2）更改目标元素的z-index和position，以便将元素置于页面中所有其他元素的前面。

如果目标元素（应该聚焦/突出显示的元素）的位置是：

<强>绝对/相对： IntroJs只是将目标元素z-index设置为9999999，因此目标元素会转到页面中所有其他元素的前面。

<强>静态： 现在，IntroJs将目标元素位置设置为relative，然后将z-index设置为9999999。

现在，目标元素位于页面中所有其他元素的前面。因此，最后一步仍然是，创建辅助元素。

为了创建辅助图层，IntroJs只获取目标元素的高度，宽度，顶部和左侧，然后创建一个div类introJs-helperLayer（和位置absolute）和将其附加到body。

<强>结论

为了专注于一个元素，IntroJs做了两个步骤，首先创建一个辅助层（页面中的圆角层），然后制作目标元素内容relative，以便将它带到前面。页面中的所有元素。

Answer 2

嗯 - 非常简单。

1. 制作一个宽度/高度为100％的叠加div，使用z-index可以说1000 - 这是黑色不透明度的主要背景;
2. 制作另一个叠加层，用z-index突出显示“步骤”的特定元素，然后基础叠加层让我们说1001 - 这是带有工具提示容器说明的“白色”元素;
3. 最后将页面中的原始元素设置为position：relative，并将最高z-index（1002）设置为高于它们。