仿Vista进程条效果

<html xmlns="http://schemas.microsoft.com/intellisense/html-401">  
<head>  
    <title></title>  
</head>  
<body>  
    <div style="position:absolute;top:10%;width:100; left: 108px;">  
        <image src="http://img.gxlcms.com//Uploads-s/new/2019-09-25-201925/2007322214542779.jpg" style="position: absolute;  
            left: 84px; top: 137px;" />  
        <div id="pb" style="position: absolute; left: 86px; top: 137px;z-index:5;overflow:hidden;width:130;" >  
            <img src="http://img.gxlcms.com/http://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-25-201925/2007322214550990.jpg"/>  
            <div 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>  
</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);  
            }  
        }  
    }  
}  
var story=new DoubleAnimation(highlight.style,"left",-100,100,1300)  
setInterval("story.Begin()",1300);  
</ script>  
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

仿Vista进程条效果_图象特效