本文介绍了一种使用JavaScript来实现元素高度渐变显示和隐藏的动画效果的方法。通过定时调整元素的高度属性，可以平滑地展开或收起内容区域，为用户提供良好的交互体验。
<script>
function showCnt()
{
document.getElementById('cnt').style.height=1;
document.getElementById('cnt').style.display='';
//document.getElementById('cnt').style.overflow-y='scroll';
showDiv();
}
function showDiv()
{
var ht=document.getElementById('cnt').style.height;
ht=parseInt(ht);
ht = ht + 10;
document.getElementById('cnt').style.height=ht;
if (ht < 260)
{
setTimeout( "showDiv()", 1 )
}
}
function hid()
{
var ht=document.getElementById('cnt').style.height;
ht=Number(ht.replace('px',''));
ht = ht - 10;
document.getElementById('cnt').style.height=ht;
if (ht > 1)
{
setTimeout( "hid()", 1 )
}
else
{
document.getElementById('cnt').style.display='none';
}
}
</script>
<input type="checkbox" onClick="if (!checked) {showCnt()} else {hid()}" checked="checked">
<div id="cnt" style="width:300px; overflow-x:hidden; overflow-y:scroll; display:none; position:relative; border:solid 1px blue;">ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds fdf d fdsfs dfds ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds fdf d fdsfs dfds ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fdsffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds fdf d fdsfs dfds ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds fdf d fdsfs dfds ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fdsffd sf dsf d sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds fdf d fdsfs dfds ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds fdf d fdsfs dfds ffd sf dsf dsf dsfd sf dsfd sfdsfdf dfds fds</div>
展开收缩的层
最新推荐文章于 2021-06-03 14:35:08 发布
扫一扫
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
