网页分步引导插件实现原理
2017-12-07 本文已影响0人
stevobm
产品试用
先找几个典型网页分步引导插件用一下：
原理分析
总体来说，可以看出插件功能还是比较简单，主要由以下几个功能要素组成：
- 提示框：定位在说明区域附件，用于呈现说明信息
- 位置跳转：自动跳转到要说明的区域，可通过获取元素位置并scrollTo过去就行
- 蒙板：突出显示要说明的区域，可通过设置z-index实现
接口设计
接口一般是一个操作数组，对应用户引导的操作步骤。其中每个步骤包含提示的位置（元素）和提示内容（文本或图片）。
界面设计
除了按照位置显示提示内容外，提示框往往还包含前后按钮和终止按钮，便于控制查看和随时退出。
