本文介绍了如何使用JavaScript实现一个响应式的下拉菜单动画，通过添加开关机制优化操作流程，并探讨了如何根据用户行为调整高度动画效果。核心内容包括定时器操作、CSS高度计算和状态切换的计时器控制。
<body>
<style>
.btn{
width: 100px;
height: 60px;
background-color: aqua;
line-height: 60px;
text-align: center ;
}
.mainbox{
width: 100px;
height: 60px;
background-color: aquamarine;
overflow: hidden;
}
.box{
width: 100px;
height: 40px;
line-height: 10px;
text-align: center;
}
</style>
<div class="btn">
<button>下拉</button>
</div>
<div class="mainbox">
<div class="box">hello1</div>
<div class="box">hello2</div>
<div class="box">hello3</div>
<div class="box">hello4</div>
</div>
<script>
window.onload=function(){
var btn=document.querySelector(".btn")
btn.addEventListener("click",function(){
//添加计时器
setInterval(function(){
var mainbox=document.querySelector(".mainbox")
//获取css中的高度
let h=window.getComputedStyle(mainbox).height
//设定值=当前+（目标值-当前）*百分比
mainbox.style.height=parseInt(h)+(200-parseInt(h)*0.5)+'px'
},300)
})
}
</script>
<script>
//优化:点击下拉后再次点击收回所有的盒子。【利用开关思想】
window.onload = function () {
var btn = document.querySelector(".btn")
var mainbox = document.querySelector(".mainbox")
//添加开关
var flag = true
var time = null
btn.addEventListener("click", function () {
if (flag = !flag) {
clearInterval(time)
mainbox.style.height = "0px"
} else {
//添加计时器
time = setInterval(function () {
//获取css中的高度
let h = window.getComputedStyle(mainbox).height
mainbox.style.height = parseInt(h) + (200 - parseInt(h) * 0.5) + 'px'
}, 300)
}
})
}
</script>
<script>
//再次优化：添加拉上的动画【在全局设置一个变量是我们的预设高度，当flag为false时将变量值设为0，当flag为true时将变量设置为我们预设的高度】
window.onload = function () {
var btn = document.querySelector(".btn")
var mainbox = document.querySelector(".mainbox")
//添加开关
var flag = true
var time = null
var height
btn.addEventListener("click", function () {
//每次都要清楚计时器防止其按多次
clearInterval(time)
if (flag = !flag) {
height=0
} else {
height=200
}
//添加计时器
time = setInterval(function () {
//获取css中的高度
let h = window.getComputedStyle(mainbox).height
mainbox.style.height = parseInt(h) + (height - parseInt(h) * 0.8) + 'px'
}, 300)
})
}
</script>
扫一扫
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
