CSS3 transition实现与收起的正统slide效果演示实例页面

nmhym0014

于 2014-10-24 10:53:53 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/nmhym0014/article/details/84681539

本文介绍如何使用简单的CSS样式和JavaScript代码实现图片的显示与隐藏效果。通过设置CSS样式来定义图片的初始状态，并利用JavaScript监听按钮点击事件，从而改变图片的高度属性达到显示或隐藏的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS代码：
.box {
width: 400px; padding: 15px; background-color: #f0f3f9;
}
.container {
height: 0; position: relative; overflow: hidden;
-webkit-transition: height 0.6s;
-moz-transition: height 0.6s;
-o-transition: height 0.6s;
transition: height 0.6s;
}
.container img {
position: absolute; bottom: 0;
}
HTML代码：
<p>想看美女图片？<a href="javascript:" id="button">点击我</a></p>
<div id="more" class="container">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" height="191" />
</div>
JS代码：
(function() {
var eleBtn = document.getElementById("button"),
eleMore = document.getElementById("more");

var display = false;

eleBtn.onclick = function() {
display = !display;
eleMore.style.height = display? "192px": "0px"
return false;
};
})();