雷火电竞官网-中国知名电竞赛事平台

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

【框架優點】

　　用戶體驗提升。

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

　　極大地減少帶寬消耗和服務器消耗。

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

【使用說明】

　　1、準備好引導頁的圖片

　　2、寫好網頁、用絕對定位寫好放入圖片

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

　　再寫一個div，做引導區,在其中放入，引導頁的div,如：

　　<div id="searchTip">

　　<div class="stepA"><a>下一步</a><span>關閉</sapn></div>

　　<div class="stepB"><a>下一步</a><span>關閉</sapn></div>

　　<div class="stepC"><a>下一步</a><span>關閉</sapn></div>

　　</div>

　　4、 用html:{height:100%},body:{height:100%};.stepA:{height:100%},撐開網頁

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

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

　　·用cursor:pointer；可以讓鼠標的指針變為手型

　　5、用js或者jquery寫邏輯操作，點擊下一步，關閉當前的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>標簽

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

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

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

　　}