如何使用Intro.js 创建绚丽的分步指南效果
发布网友
发布时间：2022-04-06 11:37
共1个回答
热心网友
时间：2022-04-06 13:06
Intro.js 一款小巧的js插件，可以更好地为您的网站项目一步一步指导说明，支持使用键盘的前后方向键导航，使用 Enter 和 ESC 键推出指南。
说起js插件，我们就想起繁冗的js代码，而且下载缓慢。不过你不用担心，Intro.js十分小巧易用，只有intro.js和introjs.css两个小文件，总共不到50kB，请放心使用∩▂∩。
如何获取Intro.js
1、到官网
如何使用
1、加载文件
1 <script src="./intro/intro.js" type="text/javascript"></script>
2 <link href="./intro/introjs.css" rel="stylesheet" type="text/css" />
2) 添加 data-intro 和 data-step 到你的html元素里
例如
1 <div class="col-md-2" data-step="1" data-intro="网志博客logo" data-position='right'><img name="logo" src="./images/logo.gif" style="margin:5px;" alt="">
说明：
data-step="1" --表示指引步骤，这里表示第一步
data-intro="网志博客logo"--描述内容，支持简的的html标签
data-position='right'--弹出层的方向，可以设置为left,middle和right
下面是演示效果
小结：在使用时发现，弹出层的相关按纽是英文标记的，如何按照我们的需求来改变呢，只需打开intro.js找到下面代码来修改即可。
01 function IntroJs(obj) {
02 this._targetElement = obj;
03
04 this._options = {
05 /* Next button label in tooltip box 下一步*/
06 nextLabel: 'Next →',
07 /* Previous button label in tooltip box 返回*/
08 prevLabel: '← Back',
09 /* Skip button label in tooltip box 跳过*/
10 skipLabel: 'Skip',
11 /* Done button label in tooltip box */
12 doneLabel: 'Done',
13 /* Default tooltip box position */
14 tooltipPosition: 'bottom',
15 /* Next CSS class for tooltip boxes */
16 tooltipClass: '',
17 /* Close introction when pressing Escape button? 是否使用键盘的Esc退出*/
18 exitOnEsc: true,
19 /* Close introction when clicking on overlay layer? 是否允使点击空白的地方退出*/
20 exitOnOverlayClick: true,
21 /* Show step numbers in introction? 是否显示说明的数据步骤*/
22 showStepNumbers: true,
23 /* Let user use keyboard to navigate the tour? 是否允许使用键盘来操作*/
24 keyboardNavigation: true,
25 /* Show tour control buttons?使用按纽操作 */
26 showButtons: true,
27 /* Show tour bullets? */
28 showBullets: true,
29 /* Scroll to highlighted element? */
30 scrollToElement: true,
31 /* Set the overlay opacity 设置弹出层的透明度*/
32 overlayOpacity: 0.8
33 };
34 }
理解上面的设置后，你就能创建出绚丽的分步指南效果。
