HTML PJAX引导单页免费版

HTMLPJAX引导单页是基于PJAX框架编写的HTML的界面简单但功能丰富的引导页面。如果你想创建一个页面来引导用户但又觉得麻烦，可以直接导入这个HTMLPJAX引导页面的源代码进行编辑。使用。

HTML PJAX引导单页是基于PJAX框架编写的HTML的界面简单但功能丰富的引导页面。如果你想创建一个页面来引导用户但又觉得麻烦，可以直接导入这个HTML PJAX引导页面的源代码进行编辑使用。

框架介绍

到目前为止我看到了很多PC端页面。当你点击页面上的链接时，页面的某个部分应该被更新，但反而整个页面刷新并且整个页面闪烁。尤其是看某些相册页面，一页有几十张图片，看完眼睛都瞎了。用ajax加载数据可以解决这个问题，但也会带来其他问题。页面无法向前和向后移动。如果支持浏览器历史记录，当刷新页面时，浏览器地址栏中的地址也会改变。您还可以使用浏览器的回滚功能返回到上一页。为了实现这样的功能，pjax应运而生。

框架优势

用户体验提升。

当页面跳转时，人眼需要重新识别整个页面。当刷新部分页面时，只需重新识别一个区域。自从我在我的网站GuruDigger上使用了pjax技术后，我不禁觉得访问其他只有页面跳转的网站要难受得多。同时，由于刷新部分页面时会出现加载提示，且刷新时浏览器中仍显示旧页面，因此用户可以容忍较长的页面加载时间。

极大地减少带宽消耗和服务器消耗。

由于只刷新了部分页面，因此大部分请求（css/js）不会被重新获取，带有用户登录信息的网站外框部分也不需要重新生成。虽然我没有具体统计这部分的消耗，但我估计至少节省了40%的请求和30%以上的服务器消耗。

框架的缺点

IE6等历史浏览器的支持。

虽然我没有实际测试过，但由于pjax采用新标准，旧浏览器兼容性会存在问题。然而，pjax 本身支持后备。当发现浏览器不支持该功能时，会跳转回原来的页面。

复杂的服务器端支持。

服务器需要根据传入的请求来决定是进行全页渲染还是部分页面渲染。相对而言，系统复杂度增加。然而，对于设计良好的服务器代码来说，支持此类功能应该不是什么大问题。

编写代码

1.准备引导页图片

2.编写网页并使用绝对定位插入图像。

3、编写一个div id='mask'/div，背景色为黑色，半透明（mask）

再写一个div来做引导区，把引导页的div放在里面，如：

div id='搜索提示'

div class='stepA'a 下一步/aspan close/sapn/div

div class='stepB'a 下一步/aspan close/sapn/div

div class='stepC'a 下一步/aspan close/sapn/div

/div

4、使用html:{height:100%},body:{height:100%};stepA:{height:100%} 打开网页

使用#mask{position:absolu;left:50%;margin-left:-half of the searchTip width} 将其掩码居中

使用text-indent:-999px;over:hidden;让文字消失

使用光标：指针；您可以将鼠标指针更改为手形

5、使用js或者jquery编写逻辑运算，点击Next，关闭当前div，打开下一个div。

js:窗口：onload=函数(){

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]的父类标签的样式并改变显示

}

变更日志

1.包含一些BUG，比如图标问题，可以自行修改；

2. LOGO为文字或图片。

3.预览地址：https://dwq.im/