javascript - IntroJs 如何实现突出显示的区域？

Question

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

提前感谢杰

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

Answer 1

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

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

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

Absolute/Relative：IntroJs 只是将目标元素设置z-index为9999999，因此目标元素位于页面中所有其他元素的前面。

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

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

为了创建辅助层，IntroJs 只需获取目标元素的高度、宽度、顶部和左侧，然后创建一个divwith 类introJs-helperLayer（和 position absolute）并将其附加到body.

结论

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

Answer 2

嗯 - 很简单。

1. 使用 z-index 制作一个宽度/高度为 100% 的覆盖 div 假设为 1000 - 这是具有黑色不透明度的主要免费；
2. 制作另一个叠加层，使用 z-index 突出显示“步骤”的特定元素，然后是基本叠加层，比如说 1001 - 这是带有工具提示容器说明的“白色”元素；
3. 最后将页面中的原始元素设置为 position:relative 并且最高 z-index(1002) 高于它们。