JavaScript Div扩展

Question

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

http://i49.tinypic.com/2q24j2b.jpg

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();
}

演示：little link。

我希望有所帮助！