当前位置:小鱼儿玄机二站 > 关于计算机 > jquery模拟进度条完成格局,jQuery完结页面顶上部

jquery模拟进度条完成格局,jQuery完结页面顶上部

文章作者:关于计算机 上传时间:2019-09-03

正文实例陈诉了jQuery实现页面顶上部分呈现的进程条效果。分享给我们供大家参照他事他说加以考察,具体如下:

本文实例陈诉了jquery模拟进程条完结格局。分享给大家供我们参谋。具体如下:

具体代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js模拟进度条练习</title>
<script type='text/javascript' src="http://xiazai.jb51.net/201508/yuanma/jquery-1.8.0.min.js"></script>
<script type='text/javascript' src='http://xiazai.jb51.net/201508/yuanma/jquery.artDialog.js?skin=default'></script>
<style>
body{ font-size:12px}
.aui_nw, .aui_ne, .aui_sw, .aui_se { height: 1px; width: 1px; }
.aui_outer, .aui_inner { border: 0; }
.aui_state_lock .aui_border { box-shadow: 0 0 10px rgba(0, 0, 0, .8); }
</style>
</head>
<body>
<button id="starLoading">显示进度条</button>
<div id="msgHtml">//www.jb51.net</div>
</body>
</html>
<script>
  (function(w){
    var _html='<div style="line-height: 30px;text-align: center;">正在为您载入数据,请稍后……</div><div id="jsLoadOuter" style="width:250px;height:8px;border:#6BAAC9 solid 1px; background:#C0EBFF; margin:0 auto;box-shadow: 0 0 3px #2E94BB;padding:1px"><div id="jsLoadInner" style="background:#54AEE0;height:100%;width:0"></div></div>';
    var __g;
    var _maxWidth=100;
    var _nowWidth=0;
    var _speed=30;
    var _step=2;
    var __time;
    progress={
      render:function(fn){
        fn&&fn(_html);
        _nowWidth=0;
        __g=document.getElementById('jsLoadInner');
        this.fx();
      },
      complete:function(fn){
        clearTimeout(__time);
        progress.completeFn=fn;
        this.setOver();
      },     
      setOver:function(){
        var _stepa=_step*1.5;
        if(_nowWidth<_maxWidth){
          _nowWidth=_nowWidth-0+_stepa;
          parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
          __g.style.width=''+_nowWidth+'%';
          _speed=(_maxWidth-_nowWidth)/1000;
          __time=setTimeout('progress.setOver()',_speed) ;
        }else{
          clearTimeout(__time);
          progress.completeFn&&progress.completeFn();
        };
      },
      fx:function(){
        var _stepa=_step;
        if(_nowWidth<_maxWidth-5){
          _stepa=_nowWidth>_maxWidth*0.6?(_stepa*0.02):_stepa;
          _nowWidth=_nowWidth-0+_stepa;
          parseInt(_nowWidth)>parseInt(_maxWidth)?_nowWidth=_maxWidth:'';
          __g.style.width=''+_nowWidth+'%';
          __time=setTimeout('progress.fx()',_speed);
        }else{
          clearTimeout(__time);
        };
      }
    }
    w.progress=progress;
  })(window)
  //
  $(function(){
    showLoading();
    $('body')
    .on('click','#starLoading',function(){
      showLoading();         
    })       
  })
  function showLoading(){
    //开始显示进度条
    progress.render(function(html){
        art.dialog({id:"jsLoadingDialog",title:"u6b63u5728u52a0u8f7du4e2du2026u2026",cancel:!1,lock:!0,background:"#fff",fixed:!0,content:html});
    }); 
    //请求完成后完成进度条,,,模拟10秒后请求完成
    setTimeout(function(){
      progress.complete(function(html){
        art.dialog.list['jsLoadingDialog']&&art.dialog.list['jsLoadingDialog'].close();
        $('#msgHtml').html('进度条已走完');
      });
    },10000);    
  };
</script>
<!Doctype html>
<html>
<head>
<title>页面顶部显示的进度条效果</title>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body>
<div id="web_loading"><div></div></div>
<script src="jquery1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
  jQuery(document).ready(function(){
    jQuery("#web_loading div").animate({width:"100%"},800,function(){ 
      setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
      }); 
    }); 
  });
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style
</body>
</html>

运作效果如下图所示:

总体实例代码点击这里本站下载.rar)。

图片 1

指望本文所述对我们jQuery程序设计有着协助。

梦想本文所述对大家的jquery程序设计具有匡助。

您大概感兴趣的稿子:

  • jquery彩色投票进度条轻易实例演示
  • jquery达成加载进程条提醒功效
  • jQuery完结轻巧的文本上传进程条效果
  • 依据jquery步骤进程条源码分享
  • jquery完成模拟百分比进度条渐变效果代码
  • 应用jQuery达成理想的圆形进程条倒计时插件
  • jQuery带进程条全屏图片轮播特效代码分享
  • jQuery达成文件上传进度条特效
  • jquery插件NProgress.js制作网页加载进度条
  • Jquery Uploadify上传带进度条的简要实例

你或然感兴趣的篇章:

  • 自定义刻度jQuery进程条及插件
  • jQuery完结公文上传进度条特效
  • jQuery达成的进度条效果
  • jquery达成的贰个大约进程条效果实例
  • Jquery Uploadify上传带进度条的简练实例
  • Jquery Uploadify多文书上传带进度条且传递温馨的参数
  • 6款新颖的jQuery和CSS3进程条插件推荐
  • 享用8款卓绝的 jQuery 加载动画和进度条插件
  • jquery实现动画菜单的左右滚动、渐变及图片背景滚动等效果
  • jquery完毕鼠标经过显示下划线的渐变下拉菜单效果代码
  • jquery完毕模拟百分比进程条渐变效果代码

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:jquery模拟进度条完成格局,jQuery完结页面顶上部

关键词: