当前位置：首页 > JavaScript

js实现遮盖

2026-04-06 08:30:47JavaScript

实现遮盖效果的方法

在JavaScript中实现遮盖效果通常涉及DOM操作和CSS样式控制。以下是几种常见方法：

使用CSS类切换

通过添加/移除CSS类来控制元素的显示与隐藏：

const element = document.getElementById('target');
element.classList.add('hidden'); // 隐藏
element.classList.remove('hidden'); // 显示

对应CSS：

.hidden {
  display: none;
}

透明度控制

实现半透明遮盖效果：

js实现遮盖

const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
overlay.style.zIndex = '999';
document.body.appendChild(overlay);

遮罩层实现

创建全屏遮罩并防止底层内容交互：

const mask = document.createElement('div');
Object.assign(mask.style, {
  position: 'fixed',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: '#000',
  opacity: 0.7,
  zIndex: 1000,
  pointerEvents: 'auto'
});
document.body.appendChild(mask);
document.body.style.overflow = 'hidden'; // 禁用滚动

SVG遮罩

使用SVG实现复杂遮罩形状：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
const mask = document.createElementNS("http://www.w3.org/2000/svg", "rect");
mask.setAttribute('width', '100%');
mask.setAttribute('height', '100%');
mask.setAttribute('fill', 'rgba(0,0,0,0.5)');
svg.appendChild(mask);
document.body.appendChild(svg);

图片模糊遮罩

对底层内容应用模糊效果：

js实现遮盖

const content = document.getElementById('content');
content.style.filter = 'blur(5px)';
content.style.transition = 'filter 0.3s ease';

动画遮罩

添加过渡动画效果：

const fadeIn = (element) => {
  element.style.opacity = '0';
  element.style.display = 'block';
  requestAnimationFrame(() => {
    element.style.transition = 'opacity 0.3s';
    element.style.opacity = '1';
  });
};

响应式遮罩

根据视口大小调整遮罩：

window.addEventListener('resize', () => {
  const mask = document.getElementById('mask');
  mask.style.width = window.innerWidth + 'px';
  mask.style.height = window.innerHeight + 'px';
});

点击关闭遮罩

为遮罩添加交互功能：

document.getElementById('mask').addEventListener('click', (e) => {
  if(e.target === e.currentTarget) {
    e.currentTarget.style.display = 'none';
  }
});

标签: js