CSS动画与JS动态宽度-优快云博客

很少会用到，简单的写一下

代码如下：

<style type="text/css">
        #box {
            width: 400px;
            height: 40px;
            border: 1px dashed #ccc;
            position: relative;
        }

        #div2 {
            width: 0;
            height: 40px;
            background-color: blue;
        }

        #div3 {
            position: absolute;
            right: -50px;
            top: 10px;
        }
    </style>
    <script>
        //获取内部或外部样式的属性值
        function getStyle(obj, att) {
            return obj.currentStyle ? obj.currentStyle[att] : getComputedStyle(obj, null)[att];
        }
        window.onload = function () {
            var div2 = document.getElementById('div2');
            var div3 = document.getElementById('div3');
            var timer = null;
            var num = 0;

            //获取div2的宽度值
            //console.log(parseInt(getStyle(div2,'width')));

            function show() {
                var _width = parseInt(getStyle(div2, 'width'));
                if (_width >= 400) {
                    clearInterval(timer);
                } else {
                    div2.style.width = _width + 4 + 'px';
                    div3.innerHTML = ++num + '%';
                }

            }

            show();
            timer = setInterval(show, 50);
        };
    </script>
</head>

<body>
    <div id="box">
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>