所在位置:首页网络工具网页制作 → HTML PJAX引导单页 免费版

HTML PJAX引导单页

 免费版
  • 软件大小:4KB
  • 更新日期:2019/3/11
  • 软件语言:简体
  • 软件类别:网页制作
  • 软件授权:免费软件
  • 软件官网:
  • 适用平台:WinAll

软件评分

PC6本地下载文件大小:4KB 高速下载需下载高速下载器,提速50%

    软件介绍精品推荐相关视频人气软件相关文章评论0下载地址

    为您推荐:网页制作

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

    相关软件软件大小版本说明下载地址

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

    HTML PJAX引导单页

    框架简介

      目前看到的很多的pc端页面点击页面某块链接的时候,原本应该是页面的某个部分更新的,但是却整个页面刷新,整个页面都闪了一下。特别是看某些图集的页面,一个页面本来就几十张图看,看完眼睛都闪瞎了。用ajax加载数据可以解决这个问题,但是也会造成另外的问题,页面无法前进和后退。支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。要实现这样的功能, pjax就应运而生。

    HTML引导页源码下载

    框架优点

      用户体验提升。

      页面跳转的时候人眼需要对整个页面作重新识别, 刷新部分页面的时候, 只需要重新识别其中一块区域。自从我在自己的网站 GuruDigger 上面采用了pjax技术后, 不由觉得访问其他只有页面跳转的网站难受了许多。 同时, 由于刷新部分页面的时候提供了一个loading的提示, 以及在刷新的时候旧页面还是显示在浏览器中, 用户能够容忍更长的页面加载时间。

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

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

    框架缺点

      IE6等历史浏览器的支持。

      虽然我没有实际测试, 但是由于pjax利用到了新的标准, 旧的浏览器兼容会有问题。 不过pjax本身支持fallback, 当发现浏览器不支持该功能的时候, 会回到原始的页面跳转上面去。

      复杂的服务器端支持。

      服务器端需要根据过来的请求, 判断是作全页面渲染还是部分页面渲染, 相对来说系统复杂度增大了。 不过对于设计良好的服务器代码, 支持这样的功能不会有太大的问题。

    编写代码

      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

      }

    更新日志

      1.含有部分BUG,比如图标问题,可以自行修改;

      2.LOGO是文字,也可以是图片。

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

    精品推荐

    下载地址

    • HTML PJAX引导单页 免费版

      本地高速下载

    其他版本下载

    相关视频

      没有数据

    厂商其他下载

    电脑版安卓版IOS版Mac版

    查看所有评论>>网友评论0

    发表评论

    您的评论需要经过审核才能显示

    精彩评论

    最新评论

    热门关键词