實現一個很實用的頁面引導功能

先上圖

項目地址

演示
源碼

功能說明

添加一個引導層對用戶進行操做引導

使用

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爲空

不太會寫文章，但願源碼和這些簡介對你有幫助，若是喜歡給個贊