js实现百叶窗
实现百叶窗效果的 JavaScript 方法
百叶窗效果可以通过动态调整多个水平或垂直条带的透明度或高度来实现。以下是使用纯 JavaScript 和 CSS 创建百叶窗效果的步骤：
HTML 结构
<div id="blinds-container">
<div class="blind"></div>
<div class="blind"></div>
<div class="blind"></div>
<!-- 更多条带... -->
</div>CSS 样式
#blinds-container {
position: relative;
width: 600px;
height: 400px;
overflow: hidden;
}
.blind {
position: absolute;
width: 100%;
height: 40px; /* 每条高度 */
background-color: #333;
transform-origin: top;
transition: transform 0.5s ease;
}JavaScript 实现
const container = document.getElementById('blinds-container');
const blindCount = 10; // 条带数量
const duration = 1000; // 动画持续时间(ms)
// 创建条带
for (let i = 0; i < blindCount; i++) {
const blind = document.createElement('div');
blind.className = 'blind';
blind.style.top = `${(i * container.offsetHeight) / blindCount}px`;
blind.style.height = `${container.offsetHeight / blindCount}px`;
container.appendChild(blind);
}
// 动画函数
function animateBlinds() {
const blinds = document.querySelectorAll('.blind');
blinds.forEach((blind, index) => {
setTimeout(() => {
blind.style.transform = 'scaleY(0)';
}, (index * duration) / blinds.length);
});
}
// 重置函数
function resetBlinds() {
const blinds = document.querySelectorAll('.blind');
blinds.forEach(blind => {
blind.style.transform = 'scaleY(1)';
});
}
// 点击触发动画
container.addEventListener('click', () => {
resetBlinds();
setTimeout(animateBlinds, 300);
});替代实现方法（使用 CSS 动画）
@keyframes blindAnimation {
0% { transform: scaleY(1); }
100% { transform: scaleY(0); }
}
.blind {
animation: blindAnimation 1s forwards;
animation-delay: calc(var(--index) * 0.1s);
}// 设置CSS变量
document.querySelectorAll('.blind').forEach((blind, index) => {
blind.style.setProperty('--index', index);
});水平百叶窗变体
要实现水平方向的百叶窗效果，只需修改 CSS：
.blind {
width: 40px; /* 每条宽度 */
height: 100%;
transform-origin: left;
transform: scaleX(1);
}然后修改 JavaScript 中的 transform 为 scaleX(0)。
性能优化建议
- 使用
will-change: transform提升动画性能 - 对于复杂场景，考虑使用 CSS
clip-path替代 transform - 使用
requestAnimationFrame实现更流畅的动画 - 避免在动画期间触发重排操作
这些方法可以创建从简单到复杂的百叶窗效果，根据实际需求调整条带数量、动画时间和方向等参数。
