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

【框架優(yōu)點(diǎn)】

　　用戶體驗(yàn)提升。

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

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

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

【使用說(shuō)明】

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

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

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

　　再寫一個(gè)div，做引導(dǎo)區(qū),在其中放入，引導(dǎo)頁(yè)的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)頁(yè)

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

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

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

　　5、用js或者jquery寫邏輯操作，點(diǎn)擊下一步，關(guān)閉當(dāng)前的div,打開下一個(gè)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

　　}