用CSS打造炫酷jQuery动画手风琴式网格效果，助你脱颖而出

前端

2023-10-16 03:02:45

用CSS和jQuery打造手风琴式网格的详细步骤

1. HTML结构搭建

首先，我们需要搭建HTML结构。我们可以使用多个div元素，并将图片作为div的背景图。通过定位，可以设置每一行每一列的位置。我们将设置一个鼠标当前位置变量，根据这个变量来设置其他div的宽高和定位。

2. 定义初始状态

在初始状态下，每个div的宽高都是100px。定位值根据索引值和5的余数关系来确定。除5余数相同的div属于同一列，如(0,5,10,15,20)。

3. CSS样式表设置

接下来，我们需要设置CSS样式表。我们可以使用flexbox布局，让div元素在同一行中水平排列。同时，我们可以使用transform属性来控制div元素的缩放和旋转。

4. jQuery脚本编写

最后，我们需要编写jQuery脚本。当鼠标悬停在某个div上时，我们将使用jQuery的animate()方法来改变其他div的宽高和定位。这样，就能实现手风琴式网格动画效果。

实例代码

<div class="grid">
  <div class="item"><img src="image1.jpg" alt=""></div>
  <div class="item"><img src="image2.jpg" alt=""></div>
  <div class="item"><img src="image3.jpg" alt=""></div>
  <div class="item"><img src="image4.jpg" alt=""></div>
  <div class="item"><img src="image5.jpg" alt=""></div>
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 100px;
  height: 100px;
  margin: 5px;
  background-size: cover;
  background-position: center;
}

.item:hover {
  transform: scale(1.5) rotate(10deg);
}

$(".item").hover(function() {
  $(this).siblings().animate({
    width: "50px",
    height: "50px"
  }, 500);
}, function() {
  $(this).siblings().animate({
    width: "100px",
    height: "100px"
  }, 500);
});