intro.js 페이지 가이드 Sharing_javascript 기술의 간단한 사용법

intro.js 데모 http://usablica.github.io/intro.js/

1단계: intro.js 및 introjs.css를 페이지에 소개

2단계: 안내를 추가하려는 블록을 선택하고 블록에 고유 ID 또는 스타일을 추가합니다

3단계: 특정 js 함수를 작성하여 안내 기능 완성

코드 복사 코드는 다음과 같습니다. $(function(){ intro(); }); //每次页面加载时调用即可 function intro(){ //这个变量可以用来存取版本号， 系统更新时候改变相应值 cur_val = 1; //判断函数所接收变量的长度 if (arguments.length ==0) { //每个页面设置不同的cookie变量名称，不可以重复，有新版本时，更新cur_val //这里模拟很多网站有新版本更新时才出现一次引导页， 第二次进入进不再出现， 这里有cookie来判断 if ($.cookie("intro_cookie_index") == cur_val) { return; } } introjs().setoptions({ //对应的按钮 prevlabel:"上一步", nextlabel:"下一步", skiplabel:"跳过", donelabel:"结束", //对应的数组，顺序出现每一步引导提示 steps: [ { //第一步引导 //这个属性类似于jquery的选择器， 可以通过jquery选择器的方式来选择你需要选中的对象进行指引 element: "#div1", //这里是每个引导框具体的文字内容，中间可以编写html代码 intro: "这是第一个div~~", //这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right position: "right" }, { //第二步引导 element: "#div2", intro: "这是第二个div~~", position: "left" }, { //第三步引导 element: ".div3", intro: " 这是第三个div ~~", position: "bottom" } ]

" intro_cookie_index",cur_val,{만료:30}); onexit(함수 () {만료:30} ); }) .start(); id="div1">첫 번째 단계 여기에 안내가 나타납니다 안내의 두 번째 단계가 여기에 나타납니다 안내의 세 번째 단계가 나타납니다 여기