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~~",<BR> position: "bottom"<BR> } <BR> ] <P> }).oncomplete(function(){<BR> //点击跳过按钮后执行的事件(这里保存对应的版本号到cookie,并且设置有效期为30天）<BR> $.cookie("intro_cookie_index",cur_val,{expires:30});<BR> }).onexit(function(){<BR> //点击结束按钮后， 执行的事件<BR> $.cookie("intro_cookie_index",cur_val,{expires:30});<BR> }) .start(); <BR> }<BR> 这里出现第一步引导 这里出现第二步引导 这里出现第三步引导
