JS实现滑动门效果的方法详解
什么是滑动门效果
滑动门效果，是一种常用于网站菜单、标签等交互式组件的效果。在鼠标悬停或点击时，该组件的背景色会发生变化并滑动到目标位置。该效果可以使用户操作更加友好，增加用户体验。
实现滑动门效果的方法
方法一：使用CSS实现
CSS3提供了transition/transform属性，可以使元素在发生状态变化时产生平滑的动画效果，我们可以使用该属性实现滑动门效果。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门效果-CSS实现</title>
<style>
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
height: 50px;
}
.menu-item {
padding: 10px;
cursor: pointer;
color: #333;
font-size: 16px;
transition: all .3s;
}
.menu-item:hover {
color: #fff;
background-color: #333;
transform: translateX(10px);
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
</body>
</html>
方法二：使用JS实现
JS提供了更加灵活的方式实现滑动门效果，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑动门效果-JS实现</title>
<style>
.menu {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
height: 50px;
}
.menu-item {
padding: 10px;
cursor: pointer;
color: #333;
font-size: 16px;
}
.menu-item-active {
color: #fff;
background-color: #333;
position: relative;
}
.menu-item-active::after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: red;
transform: scaleX(0);
transform-origin: left;
transition: all .3s;
}
.menu-item-active:hover::after {
transform: scaleX(1);
}
</style>
</head>
<body>
<div class="menu">
<div class="menu-item menu-item-active">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
<script>
// 获取菜单项元素
const menuItems = document.querySelectorAll('.menu-item');
// 循环绑定事件
menuItems.forEach((menuItem) => {
menuItem.addEventListener('mouseover', () => {
// 移除所有菜单项的active类
menuItems.forEach((item) => {
item.classList.remove('menu-item-active');
});
// 为当前菜单项添加active类
menuItem.classList.add('menu-item-active');
});
});
</script>
</body>
</html>
总结
以上两种方式均可实现滑动门效果，前者使用CSS实现，代码简洁，但缺乏灵活性；后者使用JS实现，代码量较多，但可以实现更加丰富的交互效果。在实际应用中，需根据实际场景选择最优方案。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现滑动门效果的方法详解 - Python技术站
微信扫一扫 
支付宝扫一扫 