更多展开与收起的正统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; }; })();
效果:
想看美女图片?点击我
![](http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg)