intro.js 데모 http://usablica.github.io/intro.js/ 1단계: intro.js 및 introjs.css를 페이지에 소개 2단계: 안내를 추가하려는 블록을 선택하고 블록에 고유 ID 또는 스타일을 추가합니다 3단계: 특정 js 함수를 작성하여 안내 기능 완성 코드 복사 코드는 다음과 같습니다. <br>$(function(){<br> intro();<br>});<br>//每次页面加载时调用即可<br>function intro(){<br> //这个变量可以用来存取版本号, 系统更新时候改变相应值<br> cur_val = 1;<br> //判断函数所接收变量的长度<br> if (arguments.length ==0)<br> {<br> //每个页面设置不同的cookie变量名称,不可以重复,有新版本时,更新cur_val<br> //这里模拟很多网站有新版本更新时才出现一次引导页, 第二次进入进不再出现, 这里有cookie来判断<br> if ($.cookie("intro_cookie_index") == cur_val)<br> {<br> return;<br> }<br> } <p> introjs().setoptions({<br> //对应的按钮<br> prevlabel:"上一步", <br> nextlabel:"下一步",<br> skiplabel:"跳过",<br> donelabel:"结束",<br> //对应的数组,顺序出现每一步引导提示<br> steps: [<br> {<br> //第一步引导<br> //这个属性类似于jquery的选择器, 可以通过jquery选择器的方式来选择你需要选中的对象进行指引<br> element: "#div1",<br> //这里是每个引导框具体的文字内容,中间可以编写html代码<br> intro: "这是第一个div~~",<br> //这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right<br> position: "right"<br> },<br> {<br> //第二步引导<br> element: "#div2",<br> intro: "这是第二个div~~",<br> position: "left"<br> },<br> {<br> //第三步引导<br> element: ".div3",<br> intro: "<a href="www.cnblogs.com">这是第三个div</a>~~",<br> position: "bottom"<br> } <br> ]</p>" intro_cookie_index",cur_val,{만료:30});<p> onexit(함수 () {만료:30} );<br> }) .start(); id="div1">첫 번째 단계 여기에 안내가 나타납니다</div><br> <div id="div2">안내의 두 번째 단계가 여기에 나타납니다</div><br> <div class= "div3">안내의 세 번째 단계가 나타납니다 여기</div><br></body><br></html><br><br><br></p> </div>