以下是一个按时间展开div的函数的代码示例:
HTML代码:
JavaScript代码:
function expandDiv() {
var div = document.querySelector('.myDiv');
var duration = 1000; // 动画持续时间(以毫秒为单位)
var interval = 10; // 动画每帧的时间间隔(以毫秒为单位)
var height = 0; // 初始高度为0
var maxHeight = 200; // 最大高度为200px
div.style.display = 'block'; // 显示div
var timer = setInterval(function() {
height += 1; // 每帧增加1px高度
div.style.height = height + 'px'; // 设置div的高度
if (height >= maxHeight) {
clearInterval(timer); // 动画结束,清除定时器
}
}, duration / (maxHeight / interval)); // 根据动画持续时间和每帧的时间间隔计算动画帧数
}
此代码通过使用定时器和逐渐增加div的高度来实现动画效果。首先,设置div的初始高度为0,并将其display属性设置为none以隐藏div。然后,点击按钮时,调用expandDiv函数。函数内部,获取到要展开的div元素,并设置动画的持续时间和每帧的时间间隔。然后,显示div,开始定时器。定时器每帧增加1px的高度,并根据动画的持续时间和每帧的时间间隔计算动画的帧数。当div的高度达到最大高度时,清除定时器,动画结束。