网站引导页HTML源码 绿色免费版

网站引导页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

}

立即下载