javascript - JavaScript div 扩展

Question

我希望有人可以帮助我。单击我的HTML 文本框时，我希望Div最好仅使用 JavaScript来扩展长度。我附上了一张图片以更深入地展示。再说一次，如果有人能帮助我——我会很高兴的。

Answer 1

这样的东西就足够了，HTML：

<input type = "text" style = "width: 500px;" onfocus = "expand();" onblur = "collapse();">
<div id = "yourdiv"></div>

CSS：

#yourdiv {
    margin-top: 0px;
    background-color: rgb(0, 162, 232);
    width: 500px;
    height: 0px;
}

JavaScript：

var t;
function expand() {
    var dv = document.getElementById("yourdiv");
    var duration = 500; //number of milliseconds for animation; 1000ms = 1s.
    var stepDur = Math.floor(duration / 200); //200px is our goal height here
    var curHeight = parseInt(dv.style.height.substr(0, dv.style.height.length - 2), 10); //current height of dv
    if(isNaN(curHeight)) {
     curHeight = 0;
    }
    clearTimeout(t); //make sure no other animation is happening
    function doAnim() {
        if(curHeight >= 200) {
             //we're done!
             return;
        }
        curHeight ++;
        dv.style.height = curHeight + "px";
        t = setTimeout(doAnim, stepDur);
    }
    doAnim();
}
function collapse() {
    var dv = document.getElementById("yourdiv");
    var duration = 500; //number of milliseconds for animation; 1000ms = 1s.
    var stepDur = Math.floor(duration / 200);
    var curHeight = parseInt(dv.style.height.substr(0, dv.style.height.length - 2), 10); //current height of dv
    clearTimeout(t); //make sure no other animation is happening
    function doAnim() {
        if(curHeight <= 0) {
             //we're done!
             return;
        }
        curHeight --;
        dv.style.height = curHeight + "px";
        t = setTimeout(doAnim, stepDur);
    }
    doAnim();
}

演示：小链接。

我希望这有帮助！