網站引導功能實現

歡迎加入前端交流羣
背景：發佈了新網站，須要引導用戶操做或者發佈了新功能須要展現給用戶

實現：藉助driver.js 第三方類庫實現

demo：樣式以下圖

 實現方式：點擊查看示例代碼

 api介紹：

1 const driver = new Driver({ 2   className: 'scoped-class',        // 放入你自定義的className
 3   animate: true,                    // 是否使用動畫，默認true
 4   opacity: 0.75,                    // 背景透明度（0表示僅彈出且不覆蓋）
 5   padding: 10,                      // Distance of element from around the edges
 6   allowClose: true,                 // Whether the click on overlay should close or not
 7   overlayClickNext: false,          // Whether the click on overlay should move next
 8   doneBtnText: 'Done',              // 結束按鈕文字
 9   closeBtnText: 'Close',            // 關閉按鈕文字
10   stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
11   nextBtnText: 'Next',              // 下一步文字
12   prevBtnText: 'Previous',          // 上一步文字
13   showButtons: false,               // Do not show control buttons in footer
14   keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
15   scrollIntoViewOptions: {},        // We use \`scrollIntoView()\` when possible, pass here the options for it if you want any
16   onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
17   onHighlighted: (Element) => {},      // Called when element is fully highlighted
18   onDeselected: (Element) => {},       // Called when element has been deselected
19   onReset: (Element) => {},            // Called when overlay is about to be cleared
20   onNext: (Element) => {},                    // Called when moving to next step on any step
21   onPrevious: (Element) => {},                // Called when moving to previous step on any step
22 });