弹性布局的应用

380 阅读1分钟

功能描述和最终效果

使用flex布局达到一种类手风琴的效果,鼠标点击某一块,会放大这个块,其他区域平分剩下的部分。

弹性布局1.gif

样式

关于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");