很漂亮的进度条

< html  xmlns = "http://schemas.microsoft.com/intellisense/html-401" >

< head >

     < title >一个JS做的相当漂亮的进度条 www.qpsh.com</ title >

</ head >

< body >   

</ body >

< script  type = "text/jscript" >

function DoubleAnimation(target,targetProperty,from,to,Duration)

{

     this.Begin=function anonymous()

     {

         target[targetProperty]=from;

         var starttime=new Date();

         setTimeout(StoryBoard(),1);

         function StoryBoard()

         {

             return function()

             {                 

                 var now=new Date();

                 var d=now.getTime()-starttime.getTime();

                 target[targetProperty]=Math.round(from+(to-from)*d/Duration);

                 if(d< Duration )setTimeout(StoryBoard(),10);

             }

         }

     }

     this.setTo = function (val){ to = val ;}

     this.setFrom = function (val){ from = val ;}

} 

function ProgressBar(ID)

{

     document.write( "<div id=\""+ID+"\" style=\"position:absolute;top:10%;width:100; left: 108px;\">        < image  src=\"http://www.qpsh.com/icon/emptypb.jpg\" style=\"position: absolute;left: 84px; top: 137px;\" />        < div  id=\""+ID+"pb\" style=\"position: absolute; left: 86px; top: 137px;z-index:5;overflow:hidden;width:130;\" >            < img  src=\"http://www.qpsh.com/icon/iconfullpb.jpg\"/>           < div  id=\""+ID+"highlight\" style=\"background:#ffffff;left: -500px; position: absolute; top: -1px;width:100;height:20;filter:Alpha( Opacity = 75 , FinishOpacity = 0 , Style = 2 )\"></ div >        </ div >        < div  style=\"position:absolute;top:83px;width:180px; left: 148px;\">        加载中请稍候......        </ div >   </ div >");

 

     var story=new DoubleAnimation(document.getElementById(ID+"highlight").style,"left",-100,324,2000)

     var stophandle=setInterval(story.Begin,2000);

     this.set=function(percentage)

     {

         document.getElementById(ID+"pb").style.width=Math.round(percentage*329/100);

     }

}

 

 

 

 

var pb1=new ProgressBar("ok");

var p=0;

function loading()

{

pb1.set(p+=0.3);

if(p< 100 )

     setTimeout(loading,2);

else

     window.location.href = "http://news.qq.com" ;

     

}

loading();

 

</script>

</ html >