更多展开与收起的正统slide效果演示实例页面

CSS代码：

.box {
    width: 400px; padding: 15px;  background-color: #f0f3f9;
}
.container {
    height: 0; position: relative;  overflow: hidden;
}
.container img {  
    position: absolute;  bottom: 0;
}
                

HTML代码：

<p>想看美女图片？<a href="javascript:" id="button">点击我</a></p>
<div id="more" class="container">
    <img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
</div>
                

JS代码：

(function() {
    var eleBtn = document.getElementById("button"),
        eleMore = document.getElementById("more");
    
    var height = 0, display = false, timer;
        
    var step = function() {
        height = display? (height + 20): (height - 20);
        if (height < 0) {
            height = 0;    
        } else if (height > 191) {
            height = 191;    
        }
        eleMore.style.height = height + "px";
        if (height > 0 && height < 191) {
            timer = setTimeout(step, 30);
        }
    };
    
    eleBtn.onclick = function() {
        if (timer) clearTimeout(timer)
        display = !display;
        step();
        return false;
    };
})();