【笔记】圆环形座位布局

发表于 阅读次数：

前言

利用CSS中的2D旋转实现圆环形座位布局

HTML

1
2
3
4
5
6
7
8
9
10
<div class="seat">
  <ul>
    <!-- 根据人数添加座位数量，每个座位只需要定义一组<li></li>即可 -->
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS

  • 添加基本样式样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.seat {
  /* 根据需要调整整个布局的宽高 */
  width: 400px;
  height: 400px;
  box-sizing: border-box;
}

.seat ul,
.seat ul li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.seat ul {
  width: 100%;
  height: 100%;
  position: relative;
}

.seat ul li {
  width: 80px;
  height: 80px;
  left: 50%;
  border-radius: 50%;
  /* 设置原点位置 */
  transform-origin: 200px 200px;
  position: absolute;
}

Javascript

  • 根据无需列表数量，计算位置并动态渲染
  • 向无需列表内添加元素，例如我这里添加图片作为元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let lis = document.querySelectorAll(".seat ul li");
let i = 0;
for (; i < lis.length; i++) {
  // 将父元素正向旋转
  lis[i].style.transform = `rotate(${360 / lis.length * (i)}deg)`;
  
  // 创建子元素
  let avatar = document.createElement("img");
  avatar.src = ``;
  avatar.width = 80;
  // 将子元素反向旋转修正
  avatar.style.transform = `rotate(-${360 / lis.length * (i)}deg)`;
  lis[i].appendChild(avatar);
  
}

完成

参考文献

CSDN——御风傲天