改造的漂亮CSS+JS进度条

2024-09-05 12:17:52

字体：大中小

来源：转载

供稿：网友

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

<HTML><HEAD><title>网页进度条</title><STYLE type=text/css>        .progressbar{                width:216px;                height:41px;                background:url(/jscss/demoimg/200909/x2.gif) no-repeat 0 0;                position:relative;            }          .progressbar  span{                position:absolute;                width:200px;                height:25px;               background:url(/jscss/demoimg/200909/x3.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;background:url(/jscss/demoimg/200909/x1.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>

上一篇：Javascript结合Cookies仿淘宝网最近浏览功能

下一篇：火狐、IE都支持的隐藏和展开表格行