缓慢放大div

<style>
            #testzoom{border:1px solid #ccc;background:#eee;}
        </style>
<input type="button" value="test-div" onclick="zoomDiv('testzoom')" />
        <div id="testzoom" style="width:100px;height:100px;">This is a div</div>
        <script type="text/javascript">
            function $(id){ return document.getElementById(id); }
            function zoomDiv(id){
                var obj = $(id);
                var changeW = function (){
                    var obj_w = parseInt(obj.style.width);
                    var obj_h = parseInt(obj.style.height);
                    if (obj_h <= 350 || obj_w < 400) {
                        obj.style.width = (obj_w + Math.ceil((400 - obj_w) / 10)) + 'px';
                        obj.style.height = (obj_h + Math.ceil((350 - obj_h) / 10)) + 'px';
                    }
                    else {
                        clearInterval(bw1);
                    }
                }
                bw1= setInterval(changeW,1);
            }
        </script>

posted @ 2010-06-07 13:17 豪情阅读(461) 评论(0) 收藏举报

刷新页面返回顶部