实现动画进度条

<!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>动画进度条</title>
    <script type="text/javascript">
        var act;
        function over() {
            var w = document.getElementById("bar").style.pixelwidth;
            if (w < 400) {
                document.getElementById("bar").style.pixelWidth = w + 2;
                document.getElementById("txt").innerText = "Loading..." + Math.floor(w / 400 * 100) + "%";
                clearTimeout(act);
                act = setTimeout(over, 10);
            } else {
                document.getElementById("txt").innerText = "载入完成100%";
            }
            function out() {
                var w = parseInt(document.getElementById("bar").style.pixelWidth);
                if (w > 0) {
                    document.getElementById("bar").style.pixelWidth = w - 2;
                    document.getElementById("txt").innerText = "Loading..." + Math.floor(w / 400 * 100) + "%";
                    clearTimeout(act);
                    act = setTimeout(out, 10);
                } else {
                    document.getElementById("txt").innerText = "等待载入0%";
                }
            }
        }
    </script>
    <style type="text/css">
        h4
        {
            text-align: center;
        }
        #main
        {
            width: 400px;
            height: 20px;
            margin-left: auto;
            margin-right: auto;
            background: #eee;
            border: 1px solid #333;
        }
        #bar
        {
            width: 0px;
            height: 20px;
            background: #eee url("Images/1.gif");
        }
        button
        {
            width: 100px;
            height: 18px;
            margin: 10px;
            background: #eee;
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <h4 id="txt">
        等待载入0%</h4>
    <div id="main" onmouseover="over();" onmouseout="out();">
        <div id="bar">
        </div>
    </div>
    <button onclick="over();">
        开始载入</button>
    <button onclick="out();">
            开始卸载</button>
</body>
</html>