当前位置：首页 > JavaScript

js 实现热点

2026-03-14 01:22:07JavaScript

使用 JavaScript 实现热点效果

在网页开发中，热点效果通常指用户与元素交互时（如悬停或点击）触发的视觉反馈。以下是几种常见的实现方法：

鼠标悬停高亮效果

通过 CSS 和 JavaScript 结合实现悬停时的高亮：

document.querySelectorAll('.hotspot').forEach(element => {
  element.addEventListener('mouseenter', () => {
    element.style.backgroundColor = '#ffeb3b';
    element.style.transition = 'background-color 0.3s';
  });
  element.addEventListener('mouseleave', () => {
    element.style.backgroundColor = '';
  });
});

点击波纹动画效果

模拟 Material Design 的点击波纹效果：

function createRipple(event) {
  const button = event.currentTarget;
  const circle = document.createElement('span');
  const diameter = Math.max(button.clientWidth, button.clientHeight);
  const radius = diameter / 2;

  circle.style.width = circle.style.height = `${diameter}px`;
  circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
  circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
  circle.classList.add('ripple');

  const ripple = button.querySelector('.ripple');
  if (ripple) ripple.remove();

  button.appendChild(circle);
}

document.querySelectorAll('.ripple-button').forEach(button => {
  button.addEventListener('click', createRipple);
});

配套 CSS：

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, 0.7);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

热区地图实现

对于图像热区，可以使用 <map> 和 <area> 标签结合 JavaScript：

document.querySelector('img[usemap]').addEventListener('click', (e) => {
  const map = document.querySelector(e.target.getAttribute('usemap').slice(1));
  const areas = map.querySelectorAll('area');

  areas.forEach(area => {
    area.addEventListener('mouseover', () => {
      area.style.cursor = 'pointer';
      // 显示热区提示
      const tooltip = document.createElement('div');
      tooltip.className = 'hotspot-tooltip';
      tooltip.textContent = area.getAttribute('title');
      document.body.appendChild(tooltip);
    });
  });
});

性能优化版本

使用事件委托减少监听器数量：

document.body.addEventListener('mouseover', (e) => {
  if (e.target.classList.contains('hotspot')) {
    e.target.classList.add('active');
    // 添加其他交互效果
  }
});

document.body.addEventListener('mouseout', (e) => {
  if (e.target.classList.contains('hotspot')) {
    e.target.classList.remove('active');
  }
});

现代 CSS 替代方案

部分效果可纯 CSS 实现，减少 JavaScript 依赖：

js 实现热点

.hotspot {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hotspot:hover {
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}

.hotspot:active::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s linear;
}

实现热点效果时需考虑交互反馈的即时性和视觉显著性，同时避免过度设计影响用户体验。移动端需额外处理 touch 事件，确保触控操作的响应性。