<p class=＂intro_p＂>这个进度条原来只是纯CSS的，但是发觉老是进度和背景不对应，后来改造_浏览器特效

这个进度条原来只是纯CSS的，但是发觉老是进度和背景不对应，后来改造了一下，加入了JavaScript代码，用以同步进度指示，现在感觉完美了不少，用到了三个小图片，请自行下载。

<HTML>
<HEAD>
<title>网页进度条</title>
<STYLE type=text/css>
        .progressbar{
                width:216px;
                height:41px;
                1122123<img src=http://p1.mb5u.com/texiao/8/20100522231826344.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231826344.gif) no-repeat 0 0;
                position:relative;
            }
          .progressbar  span{
                position:absolute;
                width:200px;
                height:25px;
               1122123<img src=http://p1.mb5u.com/texiao/8/20100522231826345.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231826345.gif) no-repeat 0 0;
                top:8px;
                left:8px;
                text-align:left;
                vertical-align:middle;
                line-height:25px;
                overflow:hidden;
                color:#fff;
                }
 .progressbar em{
            position:absolute;
            display:block;
1122123<img src=http://p1.mb5u.com/texiao/8/20100522231826346.gif>2244234background:url(http://p1.mb5u.com/texiao/8/20100522231826346.gif) repeat-x;
            width:200px;
            height:25px;
            left:0%;
            z-index:1000;
            top:0px;
          }
        </STYLE>
        <DIV class=progressbar id=div_contianer> <SPAN>100%<EM style="LEFT: 100%"></EM></SPAN> </DIV>
        <SCRIPT type=text/javascript>
                var bar = document.getElementsByTagName("em")[0];
                for(var i=0;i<=100;i++){
                    (function(){
                    var pos=i;
                    setTimeout(function(){
                       bar.style.left =pos+"%";
                       bar.parentNode.firstChild.nodeValue = pos+"%";
                      },pos*50)
                    })()
                    }
        </SCRIPT>

所属频道：浏览器特效/更新时间：2013-01-13

[收藏][报错][返回列表]

<p class=＂intro_p＂>这个进度条原来只是纯CSS的，但是发觉老是进度和背景不对应，后来改造_浏览器特效

浏览器特效Rss订阅特效代码搜索

浏览器特效推荐

猜你也喜欢看这些