各位高手请入啊！！！在线急求啊！！！

请问谁又javascript控制不断改变图片的宽度代码啊，我想用这个方法做一个进度条可以么？
做web进度条显示一个项目的关注度！！！求指教啊！！

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css">
    *{
    padding: 0;
    margin:0;
    } #main{
    margin: 30px;
    width: 300px;
    height: 10px;
    border: 1px solid red;
    }
    #son{
    width: 0;
    height: 10px;
    background-color: pink;
    } #showstep{
    margin: 10px 0 0 0;
    text-align:center;
    }
    </style> <script type="text/javascript">
    var i=0;
    function f(){
    var  code = document.getElementById("son").style.width=i+"px";
    if(i<=299) {
    i++;
    t=setTimeout("f()",50);//这里改变速度.
    }
    var step=Math.floor(i/3);
    if(step<100){
    document.getElementById("showstep").innerHTML="正在安装"+step+"%";
    }else {
    document.getElementById("showstep").innerHTML="已经安装成功，感谢你试用本产品。";
    }
    }
    </script> </HEAD>
     <BODY>  <div id="main">
     <div id="son">
     </div>
     <div id="showstep"></div>
     </div>
     <input type="button" value="start" onclick="f()"/>
     </BODY></HTML>还别说，前天我自己真做了一个，只是在ie6下有点BUG，FF opera chrome 下都是正常的。
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">    <HEAD>        <TITLE> New Document </TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <style type="text/css">
                *{
                    padding: 0;
                    margin:0;
                }            #main{
                    margin: 30px;
                    width: 300px;
                    height: 10px;
                    border: 1px solid red;
                }
                #son{
                    width: 0;
                    height: 10px;
                    background-color: pink;
                }            #showstep{
                    margin: 10px 0 0 0;
                    text-align:center;
                }
            </style>        <script type="text/javascript">
                var i=0;
                function f(){
                    var  code = document.getElementById("son").style.width=i+"px";
                    if(i<=299) {
                        i++;
                        t=setTimeout("f()",50);//这里改变速度.
                    }
                    var step=Math.floor(i/3);
                    if(step<100){
                        document.getElementById("showstep").innerHTML="正在安装"+step+"%";
                    }else {
                        document.getElementById("showstep").innerHTML="已经安装成功，感谢你试用本产品。";
                    }
                }
    </script> </HEAD>
     <BODY>     <div id="main">
             <div id="son">
             </div>
             <div id="showstep"></div>
         </div>
         <input type="button" value="start" onclick="f()"/>
     </BODY></HTML>木有BUG了。IE6测过
      

  3.   

    改#main{}中的width。然后 if(i<=299) 这299也改一下就好了。。上面代码是每次加
    document.getElementById("son").style.width=i+"px";
    累加的。
      

  4.   

    修改了一下 这回可以了 var  code = document.getElementById("son").style.width=i+"px";
                    if(i<=599) {
                        i++;
                        t=setTimeout("f()",50);//这里改变速度.
                    }
                    var step=Math.floor(i/3);
                    if(step<200){
                     var stepp=Math.floor(step/2);
                        document.getElementById("showstep").innerHTML="正在安装"+stepp+"%";
                    }else {
                        document.getElementById("showstep").innerHTML="已经安装成功，感谢你试用本产品。";
                    }