美文网首页
网页分步引导插件实现原理

网页分步引导插件实现原理

作者: stevobm | 来源:发表于2017-12-07 00:16 被阅读0次

产品试用

先找几个典型网页分步引导插件用一下:

原理分析

总体来说,可以看出插件功能还是比较简单,主要由以下几个功能要素组成:

  • 提示框:定位在说明区域附件,用于呈现说明信息
  • 位置跳转:自动跳转到要说明的区域,可通过获取元素位置并scrollTo过去就行
  • 蒙板:突出显示要说明的区域,可通过设置z-index实现

接口设计

接口一般是一个操作数组,对应用户引导的操作步骤。其中每个步骤包含提示的位置(元素)和提示内容(文本或图片)。

界面设计

除了按照位置显示提示内容外,提示框往往还包含前后按钮和终止按钮,便于控制查看和随时退出。

参考文章

相关文章

网友评论

      本文标题:网页分步引导插件实现原理

      本文链接:https://www.haomeiwen.com/subject/bqurixtx.html