Intro.js
为您的网站和项目提供一步一步的、更好的介绍
使用简单
引入 js 和 css,然后在代码中加入步骤和介绍。
快速小巧
7 KB 的 JavaScript 和 3 KB CSS,就是全部。
免费开源
免费和开源(包括商业用途),MIT许可证下。
参数说明
设置多个格式 json格式:
- key:value
复制
可设置参数
- nextLabel: "Next →",
- prevLabel: "← Back",
- skipLabel: "Skip",
- doneLabel: "Done",
- tooltipPosition: "bottom",
- tooltipClass: "",
- highlightClass: "",
- exitOnEsc: !0,
- exitOnOverlayClick: !0,
- showStepNumbers: !0,
- keyboardNavigation: !0,
- showButtons: !0,
- showBullets: !0,
- showProgress: !1,
- scrollToElement: !0,
- overlayOpacity: 0.8,
- positionPrecedence: ["bottom", "top", "right", "left"],
- disableInteraction: !1
复制
设置方法(多个参数设置)
关键字:setOptions
- introJs().setOptions({'prevLabel':'← 上一步','nextLabel':'下一步 →','skipLabel':'跳过','doneLabel':'完成'}).start();
复制
设置方法(单个参数设置)
关键字:setOption
- introJs().setOption("prevLabel","上一步").start();
复制
页面分布引导的元素设置:
- <div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right">
- </div>
复制
说明:
- data-step:第几步
- data-intro:分布引导的内容
- data-position:引导内容显示位置,
复制
参数:left,right,top,bottom(不解释)