求大神帮忙完善框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 #show {width: 100px;height: 200px; background: #ccc; display: none;}
 #you{
 width: 300px;
 height: 300px;
 background: red;
        }
    </style>
    <script>
 window.onload = function () {
 //根据ID返回dom元素
 var $ = function(id){return document.getElementById(id);}
 //返回dom元素的当前某css值
 var getCss = function(obj,name){
 if(obj.currentStyle) {//for ie ;
 return obj.currentStyle[name];
                }else { // for ff;
 var style = document.defaultView.getComputedStyle(obj,null);
 return style[name];
                }
            }

 var show = function(obj,speed,fn){
 obj = $(obj);
 if (!speed) {
 obj.style.display = 'block';
 return;
                }
 var initH = 0 , initW = 0;
 //获取dom的宽与高
 var oWidth = getCss(obj,'width').replace('px',''), oHeight = getCss(obj,'height').replace('px','');
 //每次dom的递减数(等比例)
 var wcut = 2*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut =20;
 //处理动画函数
 var process = function(){
 obj.style.overflow = 'hidden';
 obj.style.display = 'block';
 initW = (initW+wcut) > oWidth ? oWidth : initW+wcut;
 initH = (initH+hcut) > oHeight ? oHeight : initH+hcut;
 //判断是否减完了
 if(initW !== oWidth || initH !== oHeight) {
 //obj.style.width = initW+'px';
 obj.style.height = initH+'px';

 setTimeout(function(){process();},speed);
                    }else {
 //加完后，设置属性为显示以及原本dom的宽与高;
                        //obj.style.width = oWidth+'px';
 obj.style.height = oHeight+'px';
 if(fn){
 fn();
                        }
                    }
                }
 process();
            }

 show('you',30,function () {
 show('show',30)
            });
        }
    </script>
</head>
<body>
<div id="show"></div>
    <div id="you"></div>
</body>
</html>

因为是新手，从网上找到了这个，但是这个不能设置obj的高或者宽变化，fn是我自己加的，但是发现第一次运动完以后要好长时间才完成之后的运动。请高手帮我改改。

慕九州7009252

浏览 1155回答 1

1回答

随时随地看视频慕课网APP

​求大神帮忙完善框架

1回答

求大神帮忙完善框架