intro.js demo http://usablica.github.io/intro.js/ 第一步:在頁面中引入 intro.js 和 introjs.css 第二步:選擇你需要加入指引的區塊,對區塊增加唯一的id或樣式 第三步:寫一個具體的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> <p> }).oncomplete(function(){<br> $.cookie(" intro_cookie_index",cur_val,{expires:30});<br> }).onexit(function(){<br> $.cookie("intro_cookie_index",cur_val, {expires:30});<br> }) .start(); <br> </p> <div id="div1 ">這裡出現第一步引導</div> <br> <div id="div2">這裡出現第二步引導</div> <br> <div class="div3">這裡出現第三步引導</div> <br> </div>