js实现百叶窗

使用CSS和JavaScript实现百叶窗效果

通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素，通过控制它们的展开/折叠状态来模拟百叶窗。

<style>
  .shutter-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 300px;
    overflow: hidden;
  }

  .shutter-panel {
    flex: 1;
    background: #333;
    transition: all 0.5s ease;
    transform-origin: top;
  }

  .shutter-panel.open {
    transform: scaleY(0);
  }
</style>

<div class="shutter-container" id="shutter">
  <div class="shutter-panel"></div>
  <div class="shutter-panel"></div>
  <div class="shutter-panel"></div>
  <div class="shutter-panel"></div>
  <div class="shutter-panel"></div>
</div>

<script>
  const shutter = document.getElementById('shutter');
  const panels = shutter.querySelectorAll('.shutter-panel');

  function toggleShutter() {
    panels.forEach(panel => {
      panel.classList.toggle('open');
    });
  }

  // 点击切换百叶窗状态
  shutter.addEventListener('click', toggleShutter);
</script>

使用Canvas实现动态百叶窗

Canvas可以实现更复杂的百叶窗动画效果，包括渐变展开和自定义速度。

const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
const panelCount = 10;
const panelHeight = canvas.height / panelCount;
let openProgress = 0;

function drawShutter() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for(let i = 0; i < panelCount; i++) {
    const y = i * panelHeight;
    const height = panelHeight * (1 - openProgress);

    ctx.fillStyle = `hsl(${i * 30}, 80%, 50%)`;
    ctx.fillRect(0, y, canvas.width, height);
  }
}

function animate() {
  openProgress = Math.min(openProgress + 0.01, 1);
  drawShutter();

  if(openProgress < 1) {
    requestAnimationFrame(animate);
  }
}

canvas.addEventListener('click', () => {
  openProgress = 0;
  animate();
});

drawShutter();

结合图片的百叶窗特效

实现图片上的百叶窗效果，可以通过CSS遮罩和过渡效果完成。

<style>
  .image-shutter {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
  }

  .image-shutter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .shutter-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .shutter-overlay div {
    flex: 1;
    background: rgba(0,0,0,0.7);
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform-origin: top;
  }

  .image-shutter:hover .shutter-overlay div {
    transform: scaleY(0);
  }
</style>

<div class="image-shutter">
  <img src="your-image.jpg" alt="Sample">
  <div class="shutter-overlay">
    <div style="transition-delay: 0.1s"></div>
    <div style="transition-delay: 0.2s"></div>
    <div style="transition-delay: 0.3s"></div>
    <div style="transition-delay: 0.4s"></div>
    <div style="transition-delay: 0.5s"></div>
  </div>
</div>

响应式百叶窗组件

创建一个可复用的响应式百叶窗组件，适用于不同屏幕尺寸。

class Shutter {
  constructor(container, options = {}) {
    this.container = typeof container === 'string' 
      ? document.querySelector(container) 
      : container;

    this.panelCount = options.panelCount || 8;
    this.color = options.color || '#333';
    this.duration = options.duration || 500;
    this.isOpen = false;

    this.init();
  }

  init() {
    this.container.style.display = 'flex';
    this.container.style.flexDirection = 'column';
    this.container.style.overflow = 'hidden';

    for(let i = 0; i < this.panelCount; i++) {
      const panel = document.createElement('div');
      panel.style.flex = '1';
      panel.style.backgroundColor = this.color;
      panel.style.transition = `transform ${this.duration}ms ease`;
      panel.style.transformOrigin = 'top';
      this.container.appendChild(panel);
    }

    this.panels = Array.from(this.container.children);
  }

  toggle() {
    this.isOpen = !this.isOpen;

    this.panels.forEach((panel, i) => {
      setTimeout(() => {
        panel.style.transform = this.isOpen ? 'scaleY(0)' : 'scaleY(1)';
      }, i * 50);
    });

    return this;
  }
}

// 使用示例
const shutter = new Shutter('#shutter-container', {
  panelCount: 6,
  color: '#4a90e2',
  duration: 800
});

document.querySelector('#toggle-btn').addEventListener('click', () => {
  shutter.toggle();
});