Welcome to the front end of the exchange group exchange of knowledge acquisition videos: 749 539 640
Background: The release of the new website, we need to guide the user to operate or release new features need to show to the user
Implementation: With driver.js third-party libraries to achieve
demo: Style below
Implementation: Click to view the sample code
api Introduction:
. 1 const = Driver new new Driver ({ 2 className: 'scoped-class', // put your custom className . 3 Animate: to true , // whether the animation, default to true . 4 Opacity: 0.75, // background transparency (0 represents only the pop-up does not cover) . 5 padding: 10, // Distance from around The Edges of Element . 6 allowClose: to true , // model types within the Click The ON or overlay Should not Close . 7 overlayClickNext: to false , //The overlay Should the Click ON model types within Move Next . 8 doneBtnText: 'the Done', // end of the button text . 9 closeBtnText: 'the Close', // Close button text 10 stageBackground: '#FFFFFF', // Background Color for Element The staged for behind Highlighted 11 nextBtnText: 'the Next', // Next character 12 prevBtnText: 'Previous', // Previous text 13 showButtons: false , // the Do not Show footer Control Buttons in 14 keyboardControl: to 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 });