用Css、Js实现动画展开和收起效果,主要使用Css中overflow属性使div初始隐藏,transition属性实现动画过渡效果,再通过js代码控制div的展开和收起状态。以下是代码截图。
Html代码如下:
one
two
three
four
five
six
seven
eight
nine
ten
//绑定鼠标单击事件
btn.onclick = function(){
//动画展开
if(btn.innerHTML === "展开"){
con.style.height = 400 + "px";
btn.innerHTML = "收起";
}
//动画收起
else if(btn.innerHTML === "收起"){
con.style.height = 85 + "px";
btn.innerHTML = "展开";
}
};
};