169it科技资讯
169it -->


当前位置:  编程技术>jquery

jquery进度条代码 jquery模拟页面加载进度

    来源: 互联网  发布时间:2014-10-09

jquery模拟页面加载进度条

因为无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?

页面是从上往下执行的,可以大致估算出在页面的某个位置加载了多少,而后用jquery模拟出一个进度条来显示。

效果图,如下:

首先,先画一个进度条的样子,也就是上图图中的样子。
1,css样式代码
 

.loading{position:relative;top:0;left:0}
.tip1{float:left;background:#A70000;color:#fff;height:32px;line-height:32px;padding:0 15px;border:0;position:relative}
.jindu{float:left;margin-left:20px;color:#fff;width:150px;height:32px;line-height:32px;background:#000;position:relative}
.jindu b{color:#A70000;width:0;height:0;font-size:0px;border-width:10px;border-color:#fff #fff #fff #A70000;border-style:solid;position:absolute;left:-20px;top:5px;overflow:hidden}
.jindu .jindu2{width:0px;height:32px;line-height:32px;background:#A70000;position:absolute}
.jindu .text{width:150px;height:32px;line-height:32px;text-align:center;position:absolute}
 

2,html代码
 

<div >
<div >系统初始化中</div>
<div >
<b></b>
<div ></div>
<div >页面总进度 <font>0</font>%</div>
</div>
</div>

注意要引用jquery库,引用的位置不是在head区域,而是紧接着html代码下面写。
因为样式放head中,原因是保证页面加载第一步就把样式加载好,这样页面不会乱。
而js则不需要,再加上页面上大的文件主要也就是js,所以放在body里加载js是为了进度条考虑。
进度条画好了,jquery引用了,现在要写个方法,也就是可以让进度条动起来。(js进度条)

代码:
 

var loading = function(a,b){
var c = b*1.5;
if(b==100){
$('.bgloader .jindu2').animate({width:c+'px'},500,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b);
$('.bgloader .loading').animate({top:'-32px'},1000,function(){
$('.bgloader').fadeOut();
});
});
}else{
$('.bgloader .jindu2').animate({width:c+'px'},500,function(){
$('.bgloader .tip1').text(a);
$('.bgloader font').text(b);
});
}
};

这里写了个loading(a,b),两个参数分别是显示加载内容提示信息和加载进度百分比,然后,用了其他几个js库做加载进度测试。
 

<script type="text/javascript">loading('正在加载jQuery UI',30);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">loading('正在加载Chrome Frame',50);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>
<script type="text/javascript">loading('正在加载EXTJS',70);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>
<script type="text/javascript">loading('正在加载mootools',90);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script>
<script type="text/javascript">loading('正在加载dojo',100);</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

您可能感兴趣的文章:
  • 简单型jQuery进度条插件的实现代码
  • jquery简单进度条一例

    
相关技术文章:
    ▪jquery进度条实现代码一例

     jquery进度条实现代码 效果图: 1,html代码:   <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>jquery进度条列-www.</title> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jdt.js"></script> </head> <body> <div id="gridview"> <table> <tr><td>序号</td><td>进度条</td><td>进度</td><td>备注</td><td>其他</td></tr>......


    ▪jquery动画特效,jquery动画实例教程

     jQuery动画特效实例分享 1.自制折叠内容块   代码示例: <div class="module">   <div class="caption">     <span>标题</span>     <img src="rollup.gif" alt="rollup" title="rolls up this module"/>   </div>   <div class="body">     近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不......


    ▪jquery事件用法,jquery事件实例

     jquery事件的用法 1、通过方法名给元素绑定事件:   $('li').click(function(event){}) 2、通过bind方法给元素绑定事件:   $('li')  .bind('click',function(event){})  .bind('click',function(event){}) 可见,通过bind,可以给元素绑定多个事件。 3、事件的命名空间 为什么需要事件命名空间? →假设,先给li元素绑定2个click事件。   $('li')  .bind('click',function(event){})  .bind('click',function(event){})   →现在我们要把其中一个click事件注销掉,可能这样写:   ......


 
最新技术文章:
    ▪jquery怎么限制文本框只能输入数字?

     如何用jquery 限制文本框只能输入数字呢?   先来看一个简单的例子:    代码示例: $("input[name='fangwenyudinhuishu']").keyup(function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).bind("paste",function(){       var tmptxt=$(this).val();       $(this).val(tmptxt.replace(/\D|^0/g,''));     }).css("ime-mode", "disabled");    以上是keyup事件处理,接着处理了CTR+V事件,最后是css设置输入法不可用。 例子,用jquery限制文本框只能输入数字:(......


    ▪jquery显示与隐藏div的方法示例

     例子,显示与隐藏div。   $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法  以下是一些显示与隐藏div,给元素设置style属性的方法。   1,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性   $("#sendPhoneNum").attr("class", "n_input3");  2,给元素设置style属性   $("#top_notice").attr("style", "display:block;");    3,通过jquery的css方法,设置div隐藏   $("#sendPhoneNum").c......


    ▪jquery怎么获取div的id值?

     例子,jquery获得div的id。   <div id="product_shift_out_{m}"> </div>  <script language = "JavaScript" type="text/javascript">  $(document).ready(function(){  name = $('div').eq(0).attr('id');  alert(name)  });  </script> eq(0)是取第一个jq元素。   eq(index) 匹配一个给定索引值的元素 -------------- Matches a single element by its index. 返回值 Element 参数 index (Number) : 从 0 开始计数 例子,查找第二行。   <table> <tr><td>Header 1</td></tr> <tr><td>Va......


 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

浙ICP备11055608号