弹性过界问题 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 30px;
                background: red;
            }
        </style>
        <script>
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                var timer=null;
                var iSpeed=0;
                oDiv.onmouseover=function(){
                    startMove(300);
                }
                oDiv.onmouseout=function(){
                    startMove(30);
                }
                
                function startMove(iTarget){
                    clearInterval(timer);
                    timer=setInterval(function(){
                        iSpeed+=(iTarget-oDiv.offsetHeight)/6;
                        iSpeed*=0.75;
                        if(Math.abs(iSpeed)<=1&&Math.abs(iTarget-oDiv.offsetHeight)<=1){
                            clearInterval(timer);
                            iSpeed=0;
                            oDiv.style.height=iTarget+"px";
                        }else{
                            var H=oDiv.offsetHeight+iSpeed;
                            if(H<0){
                                H=0;
                            }
                            oDiv.style.height=H+"px";
                        }
                    },30)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

 

posted @ 2019-01-09 14:37  webxy  阅读(96)  评论(0)    收藏  举报