本文链接：https://blog.csdn.net/lzq_20150715/article/details/89435203
1 introJs().setOptions({ 2 prevLabel:"", //上一步骤按钮的文字 3 nextLabel:"", //下一步骤按钮的文字 4 skipLabel:'<span class="close"></span>', //退出按钮的文字（可以用html标签） 5 doneLabel:'<span class="close"></span>',// 完成按钮的文字,不会和skip同时出现 6 showBullets:false, // 是否显示小圆点 7 showStepNumbers:false, // 是否显示数字, 8 exitOnOverlayClick:false,// 点击蒙层是否退出 9 hidePrev:true,//没有上一个步骤是否隐藏上一步按钮 10 hideNext:true,//没有下一个步骤是否隐藏下一步按钮 11 keyBoardNavigation:false, // 是否可以支持键盘快捷键上下步骤 12 }).addSteps([ 13 { 14 element:document.getElementById(""), // 高亮的元素 15 intro:"<div><h1>22</h1><ul><li>2222</li></ul></div>",//提示的内容 16 position:"bottom-middle-aligned"，// 提示内容的位置 17 tooltipClass:"", // 提示的内容的类名 18 highlightClass:"", // 高亮的内容的类名 19 disableInteraction:true,// 是否禁止交互，如链接不能点击，输入框无法填写 20 scrollPadding：20px, // 滚动到元素的距离（会自动滚动到元素，可是有时候你希望他再往下滚动一下） 21 22 } 23 ]).start().onChange(function(){ 24 25 26 }).onexit(function(){ 27 28 })
intro.js,很强大，因为我这个新手引导定制的地方比较多，它支持我插入div等标签，修改样式等，还可以根据需要用js插入各种元素和事件，我很满意
有的时候获取元素时候，获取不到，所以需要一个等待元素出现的方法
1 define([],function(){ 2 'use strict'; 3 var util={ 4 // 等待元素出现 参数{id:"",class:""} 5 waitDom:function(domSelect){ 6 return new Promise((resolve,reject)=>{ 7 var dom; 8 var timer=setInterval(function(){ 9 if(!(domSelect instanceof Object)){ 10 reject("参数格式不正确") 11 } 12 for(let k in domSelect){ 13 switch(k){ 14 case 'id': 15 dom=document.getElementById(domSelect[k]); 16 break; 17 case 'class': 18 dom=document.getElementsByClassName(domSelect[k])[0]; 19 break; 20 } 21 } 22 if(dom){ 23 resolve(true,timer) 24 } 25 },300) 26 27 }).then(function(a,timer){ 28 if(a){ 29 clearInterval(timer) 30 } 31 }).catch(function(e){ 32 console.log(e) 33 }) 34 } 35 }； 36 retruen util 37 })
1 util.waitDom({class:""}).then(function(){})