資訊專欄INFORMATION COLUMN
摘要：先上圖項目地址演示源碼功能說明添加一個引導層對用戶進行操作引導使用參數說明步奏圖層的層次可選默認目標選擇器必填引導圖片必填延時時間可選輪詢查詢目標次數計算及顯示引導圖之前的鉤子可選引導圖片的位置修正函數可選默認與目標左上
先上圖 項目地址
演示
源碼
添加一個引導層對用戶進行操作引導
使用
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實現功能說明: 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) }
實現邏輯
根據steps異步加載所有src
添加頁面元素canvas并設置當前步驟
獲取頁面高寬并清除click事件
輪詢selector直到repeat之前獲取到對象
延遲delay時間
執行before
根據handler在canvas上繪制背景及圖片位置
添加click事件
設置當前步驟為下一個step，重復2-9步驟直到steps為空
不太會寫文章，希望源碼和這些簡介對你有幫助，如果喜歡給個贊
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84738.html
摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
摘要：轉載來源包管理器管理著庫，并提供讀取和打包它們的工具。能構建更好應用的客戶端包管理器。一個整合和的最佳思想，使開發者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數據。 轉載來源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫，并提供讀取和打包它們的工具。?npm – npm 是 javasc...
閱讀 632·2021-08-17 10:15
閱讀 1715·2021-07-30 14:57
閱讀 1971·2019-08-30 15:55
閱讀 2813·2019-08-30 15:55
閱讀 2704·2019-08-30 15:44
閱讀 662·2019-08-30 14:13
閱讀 2380·2019-08-30 13:55
閱讀 2588·2019-08-26 13:56
