功能描述和最终效果
使用flex布局达到一种类手风琴的效果,鼠标点击某一块,会放大这个块,其他区域平分剩下的部分。
样式
关于flex布局,网上已经有很多教程了。
//dom 结构
body (display:flex)
box-item (flexitem)
top_text
mid_text
bottom_text
box-item
...
背景图片内容居中
background-size: cover;
background-position: center;
最初状态,顶部和底部的文字不在页面显示,考虑到后面会有过渡效果,设置了translate
.box-item p.top {
transform: translateY(-120%);
}
.box-item p.bottom {
transform: translateY(120%);
}
还学到了个之前没怎么用的选择器:
//选择该元素下的所有子元素
.bot-item > *
功能
绑定点击事件
给body上一个事件监听
怎么找到被点击的元素
给所有的box-item
加一个自定义参数,然后用event.target
,不过考虑到box-item
下还有子元素,所以需要判断一下
if (event.target.className.includes("box-item")) {
index = event.target.getAttribute("data-index");
} else {
index = event.target.parentNode.getAttribute("data-index");
}
样式的添加与删除
有好几种方法:
1.获取dom的className,然后用字符串方法分隔再做数组的操作
2.使用dom.classList.toggle
dom.classList.toggle("active");