本人大二小學(xué)生一枚呼畸，大二的這個(gè)暑假時(shí)間有幸跟到一位老師做一些項(xiàng)目有關(guān)的事情。以上背景颁虐。
intro.js可以更好地介紹網(wǎng)站和功能蛮原，并為您的項(xiàng)目提供分步指南。
(點(diǎn)擊上方文字可以鏈接到github)
基本功能嘛另绩，相信大家能夠搜索這個(gè)名字一定是慕名而來(lái)儒陨，在這里就不多講了，在Github倉(cāng)庫(kù)中example文件夾中可以打開(kāi)index的html文件笋籽，可以看到各種引導(dǎo)形式的web表現(xiàn)蹦漠。
這篇文章主要講以下intro.js的以下幾點(diǎn)滴啊：
1车海、如何插入圖片
? ? ? ? 只需將data－intro中加入img標(biāo)簽即可笛园，就按照最標(biāo)準(zhǔn)的html標(biāo)記語(yǔ)言來(lái)寫就OK。例如：data-intro＝“balabala......nuo,this is a photo<img src='./1.png'>.”
2容劳、如何跳頁(yè)引導(dǎo)????????
? ? ? ? 跳頁(yè)引導(dǎo)是一種很常見(jiàn)的web引導(dǎo)方式喘沿，在進(jìn)行頁(yè)面轉(zhuǎn)換的時(shí)候就要傳遞相應(yīng)的web頁(yè)面參數(shù)告訴瀏覽器‘我要跳轉(zhuǎn)了 老兄 你繼續(xù)吧’
? ? ? ? 那么在跳轉(zhuǎn)的頁(yè)面中你就需要做一些工作來(lái)進(jìn)行喊話：
? ? ? ? 喊話方式A：直接型（直接定義url的傳遞變量）
????????????????????????????????href="second.html?multipage=true"
? ? ? ? 喊話方式B：羞澀型（增加一個(gè)js標(biāo)簽，把這個(gè)函數(shù)加進(jìn)去竭贩，發(fā)送參數(shù)蚜印，順便把最后一步的結(jié)束標(biāo)簽替換成下一頁(yè)）
? ? ? ????? introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
? ? ? ? ? window.location.href = 'second.html?multipage=true';
? ? ? ? });
3、如何從制定的步數(shù)開(kāi)始引導(dǎo)
????????這個(gè)是用兩種官方方式的one is goToStep()留量；another is goToStepNumber()
? ? ? ? 用起來(lái)比較順手的是introJs().goToStepNumber(1).start()窄赋；這種方式的話在括號(hào)中直接定義出需要跳轉(zhuǎn)步驟的序號(hào)（data-step）即可，
4楼熄、利用js進(jìn)行對(duì)按鈕的監(jiān)聽(tīng)忆绰，若有此按鈕則進(jìn)行引導(dǎo)，若無(wú)則pass
?if (RegExp('multipage', 'gi').test(window.location.search)) {
? ? ? ? introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
? ? ? ? ? function IsLoad(_url,fun){
? ? ? ? ? ? ? $.ajax({
? ? ? ? ? ? ? ? ? url:_url,
? ? ? ? ? ? ? ? ? type:"get",
? ? ? ? ? ? ? ? ? success:function(){
? ? ? ? ? ? ? ? ? ? //說(shuō)明請(qǐng)求的url存在可岂，并且可以訪問(wèn)
? ? ? ? ? ? ? ? ? ? if($.isFunction(fun)){
? ? ? ? ? ? ? ? ? ? ? ? ? ? fun(true);
? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?},
? ? ? ? ? ? ? ? ? statusCode:{
? ? ? ? ? ? ? ? ? ? 404:function(){
? ? ? ? ? ? ? ? ? ? ? //說(shuō)明請(qǐng)求的url不存在
? ? ? ? ? ? ? ? ? ? ? if($.isFunction(fun)){
? ? ? ? ? ? ? ? ? ? ? ? fun(false);
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? //調(diào)用
? ? ? ? ? ? var enter=[],
? ? ? ? ? ? _enter=document.getElementsByTagName('a');
? ? ? ? ? ? var enter_href;
? ? ? ? ? ? var buffer_href;
? ? ? ? ? ? for (var i=0; i<_enter.length; i++){
? ? ? ? ? ? ? ? var re = '/home';
? ? ? ? ? ? ? ? buffer_href=_enter[i].href;
? ? ? ? ? ? ? ? if (buffer_href.match(re)!=null){
? ? ? ? ? ? ? ? ? ? enter_href=buffer_href;
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? if(enter_href!=undefined){
? ? ? ? ? ? ? enter_href=enter_href+'?multipage=true';
? ? ? ? ? ? ? window.location.href = enter_href;
? ? ? ? ? ? }
? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? alert("引導(dǎo)需要資源不存在错敢，請(qǐng)您按照上一步引導(dǎo)操作之后，在進(jìn)行點(diǎn)擊缕粹。");
? ? ? ? ? ? }
? ? ? ? });
? ? ? ? introJs().start();
? ? ? }
5稚茅、引導(dǎo)中對(duì)于引導(dǎo)文字的設(shè)計(jì)
? ? ? ? 呃呃，程序員加理工男在這說(shuō)這個(gè)是不是有點(diǎn)多余平斩。亚享。。算了不說(shuō)了绘面。欺税。侈沪。
