網(wǎng)站引導(dǎo)頁HTML源碼給網(wǎng)站設(shè)計者一個參考，這是一款界面簡單功能卻豐富的基于HTML編寫自PJAX框架功能的引導(dǎo)單頁，設(shè)計者可以直接導(dǎo)入引導(dǎo)單頁源碼進(jìn)行編輯使用。

【框架優(yōu)點】

　　用戶體驗提升。

　　頁面跳轉(zhuǎn)的時候人眼需要對整個頁面作重新識別， 刷新部分頁面的時候， 只需要重新識別其中一塊區(qū)域。自從我在自己的網(wǎng)站 GuruDigger 上面采用了pjax技術(shù)后， 不由覺得訪問其他只有頁面跳轉(zhuǎn)的網(wǎng)站難受了許多。 同時， 由于刷新部分頁面的時候提供了一個loading的提示， 以及在刷新的時候舊頁面還是顯示在瀏覽器中， 用戶能夠容忍更長的頁面加載時間。

　　極大地減少帶寬消耗和服務(wù)器消耗。

　　由于只是刷新部分頁面， 大部分的請求（css/js）都不會重新獲取， 網(wǎng)站帶有用戶登錄信息的外框部分都不需要重新生成了。 雖然我沒有具體統(tǒng)計這部分的消耗， 我估計至少有40%以上的請求， 30%以上的服務(wù)器消耗被節(jié)省了。

【使用說明】

　　1、準(zhǔn)備好引導(dǎo)頁的圖片

　　2、寫好網(wǎng)頁、用絕對定位寫好放入圖片

　　3、 寫一個<div id="mask"></div>，背景顏色為黑色，半透明（蒙版）

　　再寫一個div，做引導(dǎo)區(qū),在其中放入，引導(dǎo)頁的div,如：

　　<div id="searchTip">

　　<div class="stepA"><a>下一步</a><span>關(guān)閉</sapn></div>

　　<div class="stepB"><a>下一步</a><span>關(guān)閉</sapn></div>

　　<div class="stepC"><a>下一步</a><span>關(guān)閉</sapn></div>

　　</div>

　　4、 用html:{height:100%},body:{height:100%};.stepA:{height:100%},撐開網(wǎng)頁

　　用#mask{position:absolu;,left:50%;margin-left:-searchTip寬度的一半},可以使其mask居中

　　用text-indent:-999px;over:hidden；可以讓文字消失

　　·用cursor:pointer；可以讓鼠標(biāo)的指針變?yōu)槭中?/p>

　　5、用js或者jquery寫邏輯操作，點擊下一步，關(guān)閉當(dāng)前的div,打開下一個div

　　js：window:onload=function(){

　　var oMask=document.getElementsById('mask');

　　var oSearch=document.getElementsById("searchTip");//抓取searchTip

　　var oStep=oSearch.getElementsByTagName('div');

　　var oA=oSearch.getElementsByTagName('a');//獲取<a>標(biāo)簽

　　var oS=oSearch.getElementsByTagName('span');//獲取span標(biāo)簽

　　oMask.style.display=oSearch.style.display=osSep[0].style.display='block';//顯示

　　//a[i].parentNode.style.display ?的意思為獲取a[i]的父類標(biāo)簽的樣式，改變display

　　}