JS+CSS仿魔兽游戏进入进度条特效_css 游戏等级升级特效-优快云博客

本博客展示了使用JavaScript实现的双动画加载效果，通过动态调整元素位置和宽度来模拟加载过程，提供了加载中提示和进度条显示，增强用户体验。

<html>
 2 <head>
 3 <title>落日赌城</title>
 4 </head>
 5 <body>   
 6 </body>
 7 <script type="text/jscript">
 8 function DoubleAnimation(target,targetProperty,from,to,Duration)
 9 {
10     this.Begin=function anonymous()
11     {
12         target[targetProperty]=from;
13         var starttime=new Date();
14         setTimeout(StoryBoard(),1);
15         function StoryBoard()
16         {
17             return function()
18             {                 
19                 var now=new Date();
20                 var d=now.getTime()-starttime.getTime();
21                 target[targetProperty]=Math.round(from+(to-from)*d/Duration);
22                 if(d<Duration)setTimeout(StoryBoard(),10);
23             }
24         }
25     }
26     this.setTo=function(val){to=val;}
27     this.setFrom=function(val){from=val;}
28 } 
29 function ProgressBar(ID)
30 {
31     document.write( "<div id=\""+ID+"\" style=\"position:absolute;top:199;width:100; left: 108px;\"><image src=\"/images/20110805/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=\"/images/20110805/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>");
32     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>");
33     var story=new DoubleAnimation(document.getElementById(ID+"highlight").style,"left",-100,324,2000)
34     this.set=function(percentage)
35     {
36         document.getElementById(ID+"pb").style.width=Math.round(percentage*410/100);
37         document.getElementById("light").style.left=Math.round(percentage*410/100)+194;
38         document.getElementById("light").filters[1].opacity=percentage%100;
39     }
40 }
41 //演示
42 var pb1=new ProgressBar("ok");
43 var p=0;
44 function loading()
45 {
46 pb1.set(p+=0.1);
47 if(p<100)setTimeout(loading,10);
48 }
49  
50 loading()
51 </script>
52 <br />
54 </html>