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>Js用户引导插件intro
原文地址：http://www.cnblogs.com/413xiaol/p/7912588.html