網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>瀏覽器特效代碼>

<p class=＂intro_p＂>這個進度條原來只是純CSS的，但是發(fā)覺老是進度和背景不對應(yīng)，后來改造_瀏覽器特效

這個進度條原來只是純CSS的，但是發(fā)覺老是進度和背景不對應(yīng)，后來改造了一下，加入了JavaScript代碼，用以同步進度指示，現(xiàn)在感覺完美了不少，用到了三個小圖片，請自行下載。

<HTML>
<HEAD>
<title>網(wǎng)頁進度條</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

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

相關(guān)瀏覽器特效：

<p class=＂intro_p＂>這個進度條原來只是純CSS的，但是發(fā)覺老是進度和背景不對應(yīng)，后來改造_瀏覽器特效

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

瀏覽器特效推薦

猜你也喜歡看這些