Driver.js — 一个开源、无依赖的新手交互指南库，功能强大且高度可定制

可以快速实现新手引导效果，自带动画，体验极佳，高度可定制。

Driver.js 是一个 javascript 工具库，可以让新手用户轻松快速了解产品并帮助他们专注于功能，便于他们很快熟悉我们的产品。

Driver.js 技术特点

• 简单轻量：简单易用，独立无依赖，只有4kb大小。
• 高度可定制：拥有丰富强大的API，按需使用。
• 良好的交互体验：支持动画过渡，流畅舒适的体验。
• 突出显示任何内容：突出显示页面上的任何 dom 元素。
• 简单几步即可实现功能介绍：为我们的web应用创建优秀的功能介绍和优秀的体验。
• 用户友好：通过键盘控制指南流的能力在生成应用程序中是有益的。
• 一致的浏览器兼容性：支持几乎所有浏览器

开发动手使用和建议

无论是开发APP还是Web应用程序，新手指导都是普遍的需求，在这两个领域一般都需要。

• 用户第一次打开应用，对界面并不熟悉，或者作为一款创新产品，大部分用户在使用过程中并没有类似的体验。
• 一个比较成熟的应用，版本发生了较大的变化，UI布局发生了较大的变化，需要引导告知用户。

用法

安装操作

yarn add driver.js 
npm install driver.js

也可以直接在线或本地引入，注意呈现CSS文件。

使用它的最简单方法是简单地通过提供 CSS 选择器来突出显示元素。

调整弹出框的位置。

driver.highlight({ 
  element: '#some-element', 
  popover: { 
    title: '弹出框的标题', 
    description: 'Description for it', 
    // top-center, top-right, right, right-center, right-bottom, 
    // 底部, 底部中心, 右下, 中间
    位置: 'left', 
  } 
});

以上都是小打小闹。最常见的新手引导交互就是多步引导，让用户一步步了解功能，实现这个效果也很简单。

// 定义步骤
driver.defineSteps([ 
  { 
    element: '#first-element-introduction', 
    popover: { 
      className: 'first-step-popover-class', 
      title: 'Title on Popover', 
      description: 'Body of the popover', 
      position: 'left' 
    } 
  }, 
  { 
    element: '#second-element-introduction', 
    popover: { 
      title: 'Title on Popover', 
      description: 'Body of the popover', 
      position: 'top' 
    } 
  } , 
  { 
    element: '#third-element-introduction',
    弹出框：

      描述：'弹出框的主体'，
      位置：'right' 
    } 
  }, 
]);// 开始引导
driver.start();

很酷，使用起来毫不费力，还可以通过编写我们的 CSS 样式来自定义遮罩的样式，以便它与应用程序的样式完全匹配。官方文档中有更强大的功能，感兴趣的开发者可以仔细阅读。