当前位置：首页 > JavaScript

js实现cover

2026-04-07 02:22:21JavaScript

JavaScript 实现 Cover 效果

使用 JavaScript 实现 Cover 效果通常涉及创建一个覆盖层，用于遮罩页面或特定元素。以下是几种常见实现方式：

HTML 结构

<div class="cover" id="cover"></div>

CSS 样式

js实现cover

.cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}

基础显示/隐藏控制

const cover = document.getElementById('cover');

// 显示cover
function showCover() {
  cover.style.display = 'block';
}

// 隐藏cover
function hideCover() {
  cover.style.display = 'none';
}

带动画效果的 Cover

实现淡入淡出动画效果：

js实现cover

function fadeInCover(duration = 300) {
  cover.style.display = 'block';
  cover.style.opacity = '0';

  let start = null;
  function animate(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const opacity = Math.min(progress / duration, 1);
    cover.style.opacity = opacity.toString();

    if (progress < duration) {
      window.requestAnimationFrame(animate);
    }
  }
  window.requestAnimationFrame(animate);
}

function fadeOutCover(duration = 300) {
  let start = null;
  function animate(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const opacity = Math.max(1 - progress / duration, 0);
    cover.style.opacity = opacity.toString();

    if (progress < duration) {
      window.requestAnimationFrame(animate);
    } else {
      cover.style.display = 'none';
    }
  }
  window.requestAnimationFrame(animate);
}

点击关闭 Cover

添加点击事件关闭 Cover：

cover.addEventListener('click', function(e) {
  if (e.target === cover) {
    hideCover();
    // 或 fadeOutCover();
  }
});

带内容的 Cover

在 Cover 上显示内容：

<div class="cover" id="cover">
  <div class="cover-content">
    <p>这是覆盖层内容</p>
    <button class="close-btn">关闭</button>
  </div>
</div>

.cover-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 5px;
}

document.querySelector('.close-btn').addEventListener('click', hideCover);

高级实现方案

使用 Promise 控制 Cover 显示流程：

function showModal() {
  return new Promise((resolve) => {
    showCover();
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
      <div class="modal-content">
        <p>确认操作吗？</p>
        <button class="confirm">确认</button>
        <button class="cancel">取消</button>
      </div>
    `;
    document.body.appendChild(modal);

    modal.querySelector('.confirm').addEventListener('click', () => {
      hideCover();
      document.body.removeChild(modal);
      resolve(true);
    });

    modal.querySelector('.cancel').addEventListener('click', () => {
      hideCover();
      document.body.removeChild(modal);
      resolve(false);
    });
  });
}

// 使用示例
showModal().then(result => {
  console.log('用户选择:', result);
});

这些方法提供了从基础到高级的 Cover 实现方案，可以根据具体需求选择适合的方式。