实现一个很实用的页面引导功能

先上图

项目地址

演示
源码

功能说明

添加一个引导层对用户进行操作引导

使用

new Guide([
    {
      selector: '#t1',
      src: 'img/pic-1.png',
      delay: 500,
      before: function (done) {
        done()
      },
      handler: function (el, img, option) {
        return {
          x: -img.width + el.offsetWidth + (img.height - el.offsetWidth) / 2,
          y: -(img.height - el.offsetHeight) / 2
        }
      }
    },
    {
      selector: '#t2',
      src: 'img/pic-1.png',
      handler: function (el, img, option) {
        return {
          x: -img.width + el.offsetWidth + (img.height - el.offsetWidth) / 2,
          y: -(img.height - el.offsetHeight) / 2
        }
      }
    }
  ], 9999)

参数说明

/*
 * @params steps: 步奏
 * @params zIndex: 图层的层次（可选,默认 99999）
 * 
Guide(Array<Step>: steps, Number?: zIndex)

interface Step {
    // 目标选择器(必填)
    String: selector
    // 引导图片(必填)
    String: src
    // 延时时间(可选)
    Number?: delay
    // 轮询查询目标次数
    Number?: repeat
    // 计算及显示引导图之前的钩子(可选)
    Function?: before(Function: done)
    // 引导图片的位置修正函数(可选,默认与目标左上对齐)
    Function?: handler(Element:el, ImgElement: img, Object: option)    
}

实现功能说明

实现逻辑

1. 根据steps异步加载所有src
2. 添加页面元素canvas并设置当前步骤
3. 获取页面高宽并清除click事件
4. 轮询selector直到repeat之前获取到对象
5. 延迟delay时间
6. 执行before
7. 根据handler在canvas上绘制背景及图片位置
8. 添加click事件
9. 设置当前步骤为下一个step，重复2-9步骤直到steps为空

不太会写文章，希望源码和这些简介对你有帮助，如果喜欢给个赞