jay*_*024 6 javascript html5 intro.js
来自intro.js - 一种指导用户如何使用软件界面的非常酷的方式.我深入研究了源代码,但是想知道是否有人能够简单地解释代码实现突出显示的区域(特别是尺寸/位置/ zindexing)以实现效果.
先谢谢周杰伦
Afs*_*ani 32
我是Afshin,Intro.js的作者.让我向您介绍它实际上是如何工作的.
在聚焦/突出显示的元素中,发生了两个不同的事情:
1)创建一个辅助层.辅助层是聚焦元素中的白色圆角层.
2)改变z-index和position为了使该元件在页中的所有其他元素的前面的目标元素的.
如果目标元素(应该聚焦/突出显示的元素)的位置是:
绝对/相对:IntroJs只是将目标元素设置z-index为9999999,因此目标元素将转到页面中所有其他元素的前面.
静态:现在,IntroJs将目标元素位置relative设置为然后设置z-index为9999999.
现在,目标元素位于页面中所有其他元素的前面.因此,最后一步仍然是,创建辅助元素.
为了创建辅助层,IntroJs只获取目标元素的高度,宽度,顶部和左侧,然后创建一个divwith类introJs-helperLayer(和位置absolute)并将其附加到body.
结论
为了专注于一个元素,IntroJs做了两个步骤,首先创建一个辅助层(页面中的圆角层),然后创建目标元素内容relative,以便将它带到页面中所有元素的前面.
嗯——很简单。