仿YouToBe给页面顶部加一个进度条

来源：互联网发布：如何申请多个淘宝账号编辑：程序博客网时间：2024/04/29 16:58

http://jsfiddle.net/42NYX/

首先是css部分

我们需要一个div，也就是进度条的div

div {position: absolute;top: 0px;left: 0px;width: 100%;height: 4px;background-color: red;-webkit-transform: translate3d(-100%, 0px, 0px);}

两个button

<section><Button id="start">start</Button><Button id="stop">stop</Button></section>

section {margin: 0 auto;text-align: center;height: 300px;width: 100%;line-height: 300px;}

js部分，具体讲解注释中写的有

$(function(){      var status = false; //控制停止      var i = 100;//计数器      $("#start").click(function(){                  status = false;                  i = 100;                  $("div").show();                  work();                  $(this).attr("disabled",true);      })            $("#stop").click(function(){          stop();      })                  var work = function(){          if (status) return; //如果status变位true，证明停止          var obj = {          transition: "all 200ms ease",          transition: "all 200ms ease",          transform: "translate3d(-"+i+"%, 0px, 0px)"//这里用css3的translate3d是为了进度条的长度永远不会超过页面的宽度，TD：换成width      };      $("div").css(obj);      if (i <= 1) {          i = Math.random(0,i);//在进度条即将结束时加一个无限在最近处循环的条件      } else {          i--;      }            setTimeout(work,220);            }                  var stop = function(){          status = true;          var obj = {          transition: "all 200ms ease",          transition: "all 200ms ease",          transform: "translate3d(0%, 0px, 0px)"      };//结束方法      $("div").css(obj);      setTimeout(function() {                  $("div").fadeOut();                  $("#start").attr("disabled",false);            }, 200);            }  })

以上是自己手写的，更好的效果可以查看插件地址：

http://ricostacruz.com/nprogress/