目录
一.实现功能介绍
1.页面构建
总共分为两个板块,一个按钮,一个下拉框,按钮实现点击后滑出下拉框,收回下拉框的功能,暂停下拉框继续滑出显示三个功能.下拉框中有八个子元素(div)
2.功能介绍
(1) 点击按钮,下拉框高度慢慢增加,依次滑出子元素.在滑出过程中没有点击按钮的情况下,滑出高度达到下拉框设置高度(简称最底部)后停止.
(2) 在滑出过程出,如果点击按钮,下拉框在当前位置停止
(3) 在最底部的情况下点击按钮,回收下拉框,直到完全消失在页面上
(4) 在回收过程中,如果点击按钮,下拉框在当前位置停止
相关效果显示如下图:
二.功能实现
1.功能解析
通过解析,发现点击按钮的时候总共有四种情况
第一种:页面只出现按钮,下拉框高度为0,点击按钮后,下拉框高度慢慢增加.直到显示完整个下拉框.
第二种:页面中显示按钮和整个下拉框,点击按钮后,下拉框高度慢慢减少,直到整个下拉框消失
第三种:在第一种情况中,如果点击按钮,下拉框在下滑过程中在当前位置停止增加高度.再次点击后继续增加高度.
第四种:在第二种情况中,如果点击按钮,下拉框在上升过程中在当前位置停止减少高度.再次点击后继续减少高度.
2.功能实现
变量定义:
let btn = document.querySelector("button");//获取按钮
let popup = document.querySelector(".popup");//获取下拉框
let pheight = 0; //下拉框的动态高度
let down = true;//判断上升还是下降 true:下降 false:上升
let action = false;//判断静止还是动 true:动 false:静止(1)点击按钮,下拉框动或不动
什么意思呢?通过观察我们发现,下拉框随着我们点击按钮存在两种状态,静止和滑动.我们定义一个变量 let action=true.其中true表示动,false表示静止.只要我们点击就切换状态.点击事件这里采用高级绑定.
(2)下拉框动的不同状态
下拉框高度慢慢增加和减少,这里采用setInterVal定时器实现,setInterVal定时器特点按照指定周期执行函数.由于setInterVal定时器是异步执行,所以当我们点击调用函数后,先执行action=!action,再执行setInterVal.
action的值只是让我们明白状态,可以用if语句来达到效果,不难理解,想要静止就是让setInterVal定时器停止运行.
在第一次点击按钮后,action的值变为true,表示状态为动,按钮点击的时候根据(二.1)有四种,接下来我们分别解决.
可以得知的是,下拉框动的时候有两种状态,要么上升要么下降,我们定义一个变量 let down=true.其中true表示下降,false表示上升
那么什么时候down状态改变呢? 初始状态down为下降(true),不难想象, 当点击按钮,action由false转为true,下拉框下降,当高度为160px(全部显示完成状态)的时候,下拉框静止,接下来点击按钮的话是执行上升,所以action变为false(静止),down状态要变为false(上升).
同样的道理,继续点击后,action由false转为true,上升至高度为0px(全部消失)的时候,下拉框静止,接下来点击按钮的话是执行下降,所以action变为false(静止),down状态要变为true(下降).
刚才我们说了开头和结尾,那么在这中间,滑动怎么表示?点击后静止在当前位置,再点击继续维持之前状态滑动又怎么表示呢??直接看代码
不难看出,当状态为下降(down==true),高度慢慢增加,当状态为上升,高度慢慢减少.设置高度要带上单位px,而变量pheight保存的是高度的数值部分,所以我们要用加号进行字符串拼接.
这个过程中如果点击了按钮,静止在当前位置就不用再写代码了,因为我们外层已经用if(action==true){}else{clearInterval(xl);}来达到效果了.
如果还有点晕,可以一整个代码来整理思路哟~~~~
三.全部代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.popup,
button {
margin-left: 100px;
}
.popup {
width: 150px;
height: 0px;
background-color: pink;
overflow: hidden;
}
.popup>div {
width: 150px;
height: 20px;
line-height: 20px;
}
</style>
</head>
<body>
<button>点击</button>
<div class="popup">
<div>下拉</div>
<div>下拉</div>
<div>下拉</div>
<div>下拉</div>
<div>下拉</div>
<div>下拉</div>
<div>下拉</div>
<div>下拉</div>
</div>
<script>
let btn = document.querySelector("button");//获取按钮
let popup = document.querySelector(".popup");//获取下拉框
let pheight = 0; //下拉框的动态高度
let down = true;//判断上升还是下降 true:下降 false:上升
let action = false;//判断静止还是动 true:动 false:静止
btn.addEventListener("click", fun)
function fun() {
let xl = setInterval(() => {
if (action==true) {//如果要执行动,就运行这里的代码
//此时为静止,点击后下降
if (down == true && pheight == 160) {//已经到达最底部,修改状态为上升
down = !down;
clearInterval(xl);
action = !action;
} else if (down == false && pheight == 0) {//已经到达最顶部,修改状态为下降
down =!down;
clearInterval(xl);
action = !action;
}
if (down == true) {//处于下降的时候,点击继续下降
popup.style.height = pheight + 'px';
pheight++;
}
if (down == false) {//一直处于上升的时候,点击继续上升
pheight--;
popup.style.height = pheight + 'px';
}
} else {//如果要执行静止,就运行这里代码,也就是清空计时器
clearInterval(xl);
}
}, 15);
action = !action;//点一下动,点一下不动
}
</script>
</body>
</html>
1629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
