[发明专利]一种前端步骤引导方法和系统

权利要求书

1.一种前端步骤引导方法，其特征在于，所述方法包括如下步骤：

配置引导步骤先后循序和引导信息；

标记需要被引导的元素；

根据标记获取被引导元素；

获取被引导元素的位置信息，并根据所述位置信息依次展示引导信息区域。

2.根据权利要求1所述的一种前端步骤引导方法，其特征在于，在html页面上对被引导元素标记id，并在所述html页面上自动获取具有标记id的元素。

3.根据权利要求2所述的一种前端步骤引导方法，其特征在于，根据所述标记id获取被引导元素的位置信息，其中所述位置信息包括主位置信息和副位置信息，根据所述主位置信息和副位置信息展示引导信息区域。

4.根据权利要求3所述的一种前端步骤引导方法，其特征在于，获取被引导元素的主位置信息后，若判断主位置信息属于被引导元素的上或下位置，进一步判断被引导元素的副位置信息是属于左、中或右位置，获取目标元素的位置信息，计算所述被引导元素元素主位置和副位置相对于目标元素的偏移量，定位主位置信息，并执行所述引导信息区域从当前被引导元素到目标元素的依次展示。

5.根据权利要求3所述的一种前端步骤引导方法，其特征在于，若判断主位置信息属于被引导元素的左或右位置，进一步判断被引导元素副位置信息是属于被引导元素上、中或下位置，获取目标元素的位置信息，计算所述被引导元素主位置和副位置相对于目标元素的偏移量，定位主位置信息，并执行所述引导信息区域从当前被引导元素到目标元素的依次展示。

6.根据权利要求4所述的一种前端步骤引导方法，其特征在于，在获取到主位置信息和副位置的偏移量后，分别计算需要展示的引导信息的边界和屏幕边界之间的距离，用于判断展示引导信息区域是否超显示边界。

7.根据权利要求6所述的一种前端步骤引导方法，其特征在于，若主位置对应的位置为上或下被引导元素，获取上或下被引导元素的纵坐标高度h1，获取引导信息区域的上下边界高度h2，屏幕上下边界高度为H，若h1+h2＞H，则表示引导信息区域的上或下边界已经超出屏幕显示范围，重新调整所述引导信息区域的上下边界宽度。

8.根据权利要求6所述的一种前端步骤引导方法，其特征在于，若主位置对应的位置为左或右被引导元素，获取左或右被引导元素横坐标长度s₁，获取引导信息区域的左右边界宽度s₂，屏幕左右边界的宽度为S，若s₁+s₂＞S，则表示引导信息区域的左或右边界已经超出屏幕显示范围，重新调整所述引导信息区域左右边界的宽度。

9.一种前端步骤引导系统，其特征在于，所述系统采用上述权利要求1-8中任意一项所述的一种前端步骤引导方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于保存并应用上述权利要求9所述的一种前端步骤引导系统。