JavaScript如何实现滑动门效果
滑动门（Sliding Doors）效果是一种常见的用于制作按钮、导航菜单等元素的技术。它可以通过使用 CSS 和 JavaScript 结合实现。下面是一个使用 JavaScript 实现滑动门效果的示例：
HTML：
<div class="sliding-door"> <div class="left"></div> <div class="right"></div> <a href="#">Button</a> </div>
CSS：
.sliding-door {
position: relative;
display: inline-block;
overflow: hidden;
}
.left, .right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: #ccc;
transition: transform 0.3s ease-in-out;
}
.left {
left: 0;
}
.right {
right: 0;
transform: translateX(100%);
}
a {
display: block;
width: 100%;
height: 100%;
line-height: 2rem;
text-align: center;
color: #fff;
text-decoration: none;
}
JavaScript：
const slidingDoor = document.querySelector('.sliding-door');
const left = document.querySelector('.left');
const right = document.querySelector('.right');
slidingDoor.addEventListener('mouseenter', () => {
left.style.transform = 'translateX(0)';
right.style.transform = 'translateX(-100%)';
});
slidingDoor.addEventListener('mouseleave', () => {
left.style.transform = 'translateX(-100%)';
right.style.transform = 'translateX(100%)';
});
在上述示例中，我们首先定义了一个包含左半部分和右半部分的滑动门容器（.sliding-door）。然后使用 CSS 将左右两个部分定位到合适的位置，并设置过渡效果。最后，通过 JavaScript 监听鼠标进入和离开事件，来触发滑动门效果的展开和收起。
当鼠标进入 .sliding-door容器时，我们将左侧部分移动回原始位置（translateX(0)），同时将右侧部分向左移出视图（translateX(-100%)）。当鼠标离开容器时，我们将左侧部分向左移出视图（translateX(-100%)），同时将右侧部分向右移出视图（translateX(100%)）。
这样就实现了简单的滑动门效果。你可以根据实际需求和设计进行调整和扩展，添加更多样式和交互效果。
阅读剩余
THE END
