一個游戲網站的網頁進度條

2024-09-05 12:17:49

字體：大中小

來源：轉載

供稿：網友

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

<html><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   class="pendeno"   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   class="wsiebkw"   id=/""+ID+"pb/" style=/"position: absolute; left: 106px; top: 143px;z-index:5;overflow:hidden;width:130;/" ><img src=http://www.aspku.com/"/jscss/demoimg/200907/pb_full3.jpg/"/><div   class="ieykdbk"   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   class="myoaxca"   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>

上一篇：Ajax風格的一款網頁Loading

下一篇：JavaScript打造有軌跡的拖動特效

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注