歡迎加入前端交流群交流知識獲取視頻資料：749539640
背景：發布了新網站，需要引導用戶操作或者發布了新功能需要展示給用戶
實現：借助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 });
