js实现卡片

使用HTML和CSS创建基础卡片结构

HTML结构定义卡片容器，CSS设置样式。卡片通常包含标题、图片、描述和操作按钮。

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Card description text goes here.</p>
    <button class="card-button">Click Me</button>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 16px;
}

.card-content h3 {
  margin: 0 0 8px 0;
  font-size: 1.2rem;
}

.card-content p {
  margin: 0 0 16px 0;
  color: #666;
}

.card-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

动态生成卡片组件

使用JavaScript动态创建卡片元素并添加到DOM中。

function createCard(title, description, imageUrl) {
  const card = document.createElement('div');
  card.className = 'card';

  const img = document.createElement('img');
  img.src = imageUrl;
  img.alt = title;

  const content = document.createElement('div');
  content.className = 'card-content';

  const h3 = document.createElement('h3');
  h3.textContent = title;

  const p = document.createElement('p');
  p.textContent = description;

  const button = document.createElement('button');
  button.className = 'card-button';
  button.textContent = 'View More';

  content.appendChild(h3);
  content.appendChild(p);
  content.appendChild(button);

  card.appendChild(img);
  card.appendChild(content);

  return card;
}

// 使用示例
const container = document.getElementById('cards-container');
const newCard = createCard(
  'New Card', 
  'This is a dynamically created card.', 
  'https://example.com/image.jpg'
);
container.appendChild(newCard);

实现卡片交互效果

为卡片添加悬停效果和点击事件处理。

// 添加悬停效果
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
    card.style.transform = 'translateY(-5px)';
    card.style.boxShadow = '0 8px 16px rgba(0,0,0,0.2)';
  });

  card.addEventListener('mouseleave', () => {
    card.style.transform = '';
    card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
  });
});

// 添加按钮点击事件
const buttons = document.querySelectorAll('.card-button');
buttons.forEach(button => {
  button.addEventListener('click', (e) => {
    e.stopPropagation();
    const card = button.closest('.card');
    alert(`Card "${card.querySelector('h3').textContent}" clicked!`);
  });
});

卡片数据绑定与渲染

从API获取数据并渲染多个卡片。

async function fetchAndRenderCards() {
  try {
    const response = await fetch('https://api.example.com/cards');
    const data = await response.json();

    const container = document.getElementById('cards-container');
    container.innerHTML = '';

    data.forEach(item => {
      const card = createCard(item.title, item.description, item.imageUrl);
      container.appendChild(card);
    });

  } catch (error) {
    console.error('Error fetching cards:', error);
  }
}

// 页面加载时调用
window.addEventListener('DOMContentLoaded', fetchAndRenderCards);

响应式卡片布局

使用CSS Grid或Flexbox创建适应不同屏幕尺寸的卡片布局。

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

@media (max-width: 768px) {
  .cards-container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .cards-container {
    grid-template-columns: 1fr;
  }
}