1.demo直接贴上来了，有什么不懂的，直接去官网上看,地址：https://introjs.com/。
2.这个intro插件的版本是v2.7.0，复制下来代码，引入库应该直接可以运行。
3.点评一下：
a.插件不会自己记录引导的信息，需要手动控制引导是不是执行过
b.不在step里提供钩子，而是提供全局的钩子
c.在全局钩子里用this._introItems[this._currentStep]找到当前的
d.可以在step里定义自己的函数，然后在全局钩子里调用
e.不能动态生成节点
f.backdrop的时候，点下一步不会闪
g.提供hints的支持
h.element为id的时候没啥说的，为class的时候，第一个匹配上的class出现引导
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="introjs.css" type="text/css" rel="stylesheet" />
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="intro.js"></script>
<script type="text/javascript">
$(function(){
intro = introJs();
intro.setOptions({ prevLabel:"<",
nextLabel:">",
skipLabel:"skip",
doneLabel:"done", steps: [
{
element: '#div1',
intro: '1~~',
position: 'right'
},
{
element: '#div2',
intro: '2~~',
position: 'right'
},
{
element: '.div3',
intro: '<a href="www.cnblogs.com">3</a>~~',
position: 'bottom'
}
],
hints: [
{
element: '#div1',
hint: "This is a tooltip.",
hintPosition: 'top-middle'
},
{
element: '#div2',
hint: 'More features, more fun.',
position: 'left'
},
{
element: '.div3',
hint: "<b>Another</b> step.",
hintPosition: 'top-middle'
}
] });
intro.onbeforechange(function(targetElement) {
console.log(this) // this._introItems[this._currentStep]
}); intro.start();
});
</script>
</head>
<body>
<div id="div1" style="width:150px;height:50px;">1</div>
<div id="div2" style="width:150px;height:50px;">2</div>
<div class="div3" style="width:150px;height:50px;">3</div> <button onclick="intro.addHints()">addHint</button> </body>
</html>