• 一个比好用的新用户引导的库 driverjs

在做这个功能时，首先要确定目标是什么样子的， 如果只是随意点击下一步下一步，那我感觉可能用图片轮播图的方式会快一点，更容易解决且方便，想要什么步骤 只需要更改图片就好，但是要管理功能的话，就可以使用这个库。

可以使用新版的， 新版本是通过 SVG 来显示蒙层的 不是通过一个 div 标签来显示一个大的蒙层，之后再通过 position 和 z-index 来控制层级的显示。

在实现这个功能，是有多种方法实现的，首先可以思考一下新版的实现方式

• 新版实现方式：SVG

主要是通过 SVG 的属性 fill-rule:evenodd clip-rule:evenodd path

• 首先确定高亮 DOM的位置，计算出距离窗口 上下左右的距离
• 通过 path 根据计算的距离勾勒出高亮部分的位置
• 然后 通过 fill-rule:evenodd clip-rule:evenodd 填充和裁切，把高亮部分的位置裁切掉
• 最后就实现了，就和剪窗花的原理一样，剪出一个高亮的形状，让 dom 元素透过来

旧版本实现方式：position 和 z-index

部分实现差不多，都是需要计算出高亮dom元素的大小和距离窗口上下左右的距离，不同的是通过position 和 z-index 来控制层级的显示

• 首先确定高亮dom的位置，计算出距离窗口 上下左右的距离
• 然后创建一个新的 dom 元素来作为高亮元素的背景，
• 蒙版是 position: fixed; 在整个窗口
• 需要高亮的元素是会添加两个class 分别是添加 position: relative!important; 和 z-index: 100004!important;
• 然后高亮元素 高亮元素的背景 蒙层的层级 分别是 100004 100003 100002 就是 高亮元素在最上层，元素背景在中间层，蒙层在下一层，原本的 DOM 文档流在蒙层的下一层

这个设计到浏览器的渲染原理，在绘制时，会创建层叠上下文，

可以在这个位置查看一下层级的顺序就可以明白他的原理

然而这种实现方式可能会产生一个问题，就是在具有 transform 属性的DOM中包含positon 元素的话，可能会出现一些问题，因为 transform 有可能开启 GUI 渲染，然后创建一个独立的图层，而 postion 元素由于父级是transform 所有会和它在同一个图层。

小小结

此功能还有很多思路，这个库的 API 就不在此描述了 大家可以到其文档看，使用还是很方便的，主要是讲思路，以防公司要求不能使用别人的库，要求自己实现，那这个思路就可以节省很多思考的时间。