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>
原文：http://www.cnblogs.com/413xiaol/p/7912588.html