css js实现九宫格特效

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 300px;
  margin: auto;
}

.cell {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.cell:hover {
  transform: scale(1.1);
}

document.querySelectorAll('.cell').forEach(cell => {
  cell.addEventListener('click', function() {
    // 移除所有单元格的激活状态
    document.querySelectorAll('.cell').forEach(c => c.classList.remove('active'));
    // 添加当前单元格的激活状态
    this.classList.add('active');
  });
});

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg', 'img6.jpg', 'img7.jpg', 'img8.jpg', 'img9.jpg'];
let currentIndex = 0;

document.querySelectorAll('.cell').forEach((cell, index) => {
  cell.addEventListener('click', function() {
    currentIndex = index;
    updateGrid();
  });
});

function updateGrid() {
  document.querySelectorAll('.cell').forEach((cell, index) => {
    cell.style.backgroundImage = `url(${images[index]})`;
    if (index === currentIndex) {
      cell.classList.add('active');
    } else {
      cell.classList.remove('active');
    }
  });
}