一個游戲網站的網頁進度條_瀏覽器特效

一個游戲網站的網頁進度條，看起來好像是魔獸的網頁，進度條是用兩張圖片，一張背景圖片一張進度條圖片，然后用JS控制疊加而成，附有演示代碼，希望大家喜歡。

<html xmlns="http://schemas.microsoft.com/intellisense/html-401">
<head>
<title>網頁進度條</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:199;width:100; left: 108px;\"><image src=\"/jscss/demoimg/200907/pb_empty.jpg\" style=\"position: absolute;left: 84px; top: 137px;\" /><div id=\""+ID+"pb\" style=\"position: absolute; left: 106px; top: 143px;z-index:5;overflow:hidden;width:130;\" ><img src=\"/jscss/demoimg/200907/pb_full3.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>");
    document.write("<div id='light' style=\"position: absolute;height:10;width:20;left:1000;top:334;background:#aaccff;filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10')progid:DXImageTransform.Microsoft.Alpha(opacity=50);\"></div>");
    var story=new DoubleAnimation(document.getElementById(ID+"highlight").style,"left",-100,324,2000)
    this.set=function(percentage)
    {
        document.getElementById(ID+"pb").style.width=Math.round(percentage*410/100);
        document.getElementById("light").style.left=Math.round(percentage*410/100)+194;
        document.getElementById("light").filters[1].opacity=percentage%100;
    }
}
//演示
var pb1=new ProgressBar("ok");
var p=0;
function loading()
{
pb1.set(p+=0.1);
if(p<100)setTimeout(loading,10);
}
 
loading()
</script>
</html>

所屬頻道：瀏覽器特效/更新時間：2013-04-18

[收藏][報錯][返回列表]

相關瀏覽器特效：

一個游戲網站的網頁進度條_瀏覽器特效

瀏覽器特效Rss訂閱特效代碼搜索

瀏覽器特效推薦

猜你也喜歡看這些