自己动手制作基于jQuery的Web页面加载进度条插件

静态效果的实现

网页顶部加载进度条,近年来很流行,很多网站都采用了这种加载方式。网上也有这样类似的插件,今天我们总结一下网页顶部线性页面加载进度条。
大体的写法如下:

body{
        margin:0;
      }
      #progress {
        position:fixed;
        height: 2px;
        background:#2085c5;
        transition:opacity 500ms linear
      }
      #progress.done {
        opacity:0
      }
      #progress span {
        position:absolute;
        height:2px;
        -webkit-box-shadow:#2085c5 1px 0 6px 1px;
        -webkit-border-radius:100%;
        opacity:1;
        width:150px;
        right:-10px;
        -webkit-animation:pulse 2s ease-out 0s infinite;
      }

      @-webkit-keyframes pulse {
        30% {
          opacity:.6
        }
        60% {
          opacity:0;
        }
        100% {
          opacity:.6
        }
}

html代码:

<div id="progress">
      <span></span>
</div>

jquery代码:

$({property: 0}).animate({property: 100}, {
        duration: 3000,
        step: function() {
          var percentage = Math.round(this.property);

          $('#progress').css('width', percentage+"%");

           if(percentage == 100) {
              $("#progress").addClass("done");//完成,隐藏进度条
            }
        }
});

设定其持续时间是3秒钟!你可以改动一下,把3秒钟的时间改成你网页的加载时间,就可以做出网页动态加载进度条了。。

页面加载插件的实际应用及load函数的运用
关于页面的加载,很难找到一个很好的方法来获取页面的实际下载进度。下面介绍的方法是运用 $(window).load(function() {})和$(document).ready(function(){})来进行的,虽然这种方法不是很准确,但是也可以模拟网页的下载。

$(function(){
NProgress.start();
})

$(window).load(function() {
  NProgress.done();
})

有很多朋友可能对 $(window).load(function() {})和$(document).ready(function(){})的区别不是很了解。大家可以写一个小案例来测试一下!

例如:

$(window).load(function() {
  alert("我是load")
})
$(function(){
 alert("我是document.ready")
})

很明显,肯定是document.ready先执行,因为document.ready是在DOM结构载入完后执行的,不需要载入得这么“完全”,而$(window).load则是页面全部内容加载完成后执行的。

有时候,

$(window).load(function() {
  alert("我是load")
})

也可以用js的写法:

window.onload = function(){ ... }

都是在页面全部下载完成之后来执行的。两种写法是等价的!

时间: 2016-06-01

打造自己的jQuery插件入门教程

本文实例讲述了打造自己的jQuery插件的方法.分享给大家供大家参考,具体如下: 写js插件并不麻烦,js插件有两类,类型插件和对象插件.首先举例: $.post(url); 这个是类型插件,换句话说该插件在调用的时候不需要指定对象.那么: $('p').click(); 这个是对象插件,也就是说使用该插件的时候需要指定对象. 在写jQuery插件的时候,都是有固定的模板: jQuery.plugin1 = function(text) { alert(text); };//类型级别框架,类似

jQuery flip插件实现的翻牌效果示例【附demo源码下载】

本文实例讲述了jQuery flip插件实现的翻牌效果.分享给大家供大家参考,具体如下: 最近做了个类似于塔罗牌翻牌的效果,分享给大家. 运行效果图如下: 具体代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>flip</title> <style> *{margin:0;padd

jQuery创建自己的插件(自定义插件)的方法

但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一

自己使用jquery写的一个无缝滚动的插件

效果图: html代码: 复制代码 代码如下: <h1>无缝滚动,向右滚动</h1> <ul id="guoul1"> <li><img src="img/f1.jpg" alt="f1"/></li> <li><img src="img/f2.jpg" alt="f2"/></li> <li&

编写自己的jQuery提示框(Tip)插件

对jQuery相信很多同学和我一样平时都是拿来主义,没办法,要怪只能怪jQuery太火了,各种插件基本能满足平时的要求.但是这毕竟不是长久之道,古人云:"授之以鱼,不如授之以渔". 为了方便之前没有接触的同学,先来回顾一下jQuery的插件机制吧. 复制代码 代码如下: //添加check和uncheck插件 jQuery.fn.extend({   check: function() {     return this.each(function() { this.checked =

创建自己的jquery表格插件

在模仿easyui的dataGrid表格插件的同时,自己去封装了一个.实现了基本的json数据的动态加载,自动分页,全选全不选,鼠标悬浮变色,隔行变色等 由于涉及到ajax访问,所以必须部署到iis上才能看出效果,先给大家看一下效果图: css样式 /* CSS Document */ body { font: 14px/1.43 "Helvetica Neue", Tahoma, "Microsoft YaHei", Arial; color: #253443;

jQuery树形插件jquery.simpleTree.js用法分析

本文实例讲述了jQuery树形插件jquery.simpleTree.js用法.分享给大家供大家参考,具体如下: 最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现. 这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果 同时这个树的节点

自己动手开发jQuery插件教程

因为工作需要,所以这几天琢磨了一下关于jQuery插件开发的问题,经过一天鏖战,终于完成自己动手做的第一个jQuery插件,对于俺这种见了css就头痛的人来说,一天时间8小时,保守估计有5个小时在弄css(我css文盲级别,形容得还不够贴切,如果说文盲不会写字,只会说话,那我是连话都不会说的级别.),好了,废话少说,切入正题. 首先要了解jQuery插件开发分两种,1.类级别的插件开发.2.对象级别插件开发. 什么? 你居然问什么是类级别和什么是对象级别? 类级别你可以理解为拓展jquery类,

jQuery插件easyUI实现通过JS显示Dialog的方法

本文实例分析了jQuery插件easyUI实现通过JS显示Dialog的方法.分享给大家供大家参考.具体如下: <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title></title> <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type=&quo

分享一个自己动手写的jQuery分页插件

工作需要一个JS分页插件,心想自己动手写一个吧,一来上网找一个不清楚代码结构的,出了问题难以解决,而且网上的插件所包含的功能太多,有些根本用不到,就没必要加载那段JS,二来想起没写过jQuery插件,就当练一下手了,好了,先看结果: http://demo.jb51.net/js/2014/EasyPage/ 简单说一下这个插件所要实现的功能 后台将查询出来的内容全部显示到页面上,这个插件要控制这些内容,使其一页一页显示.有上一页,下一页,首页,尾页的功能.在第一页时,上一页,首页要隐藏.在最后

jquery validate表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

jQuery.Validate表单验证插件的使用示例详解

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

jquery.validate表单验证插件使用方法解析

为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易.jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1.在控件中使用默认验证规则,例子: 电子邮件(必填) <input id="email" class="required email" value="email@" /> 2.可以在控件中自定义验证规则

jQuery Validate表单验证插件 添加class属性形式的校验

本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla

jQuery Validate表单验证插件的基本使用方法及功能拓展

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示            2.鼠标离开表单项时,开始校验元素             3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数:

jQuery Validate表单验证插件实现代码

 1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素   3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校

功能强大的jquery.validate表单验证插件

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

jquery.validate表单验证插件使用详解

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段 (2)email:true                  必须输入正确格式的电子邮件 (3)date:true             

深入学习jQuery Validate表单验证

本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea

jQuery Validate表单验证入门学习

本文讲述了jQuery Validate表单验证入门的基础知识,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,以下就是本文的全部内容,特分享给大家. 1.导入 js 库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/j