下面我将为你详细讲解“JS+CSS实现仿支付宝菜单选中效果代码”的完整攻略。
背景
支付宝的菜单选中效果非常优美，用户对于选中菜单项有一个非常直观的反馈。因此，很多网站尝试模仿这种效果，提高用户的体验。
效果演示
在开始之前，我先给你演示一下最终的效果。你可以访问以下链接，预览动态效果：
实现步骤
下面是实现仿支付宝菜单选中效果的详细步骤：
1. 准备HTML结构
首先，我们需要准备一个HTML结构，用于展示菜单项。示例代码如下：
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
2. 添加CSS样式
然后，我们添加一些基本的CSS样式，如下：
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
}
a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
这里，我们使用了float浮动来让菜单项排列在同一行。
3. 添加选中效果
现在，我们来添加选中效果。我们可以使用CSS3的伪类:before和:after来实现。示例代码如下：
a:before, a:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
a:before {
background-color: rgba(255,255,255,0.5);
transform: scale(1.2, 1.2);
opacity: 0;
transition: all .3s ease-out;
}
a:after {
background-color: rgb(220,224,224);
transform: scale(0, 0);
opacity: 1;
transition: all .3s ease-out;
}
a:hover:before {
opacity: 1;
transform: scale(1, 1);
}
a:hover:after {
-webkit-transition-delay: .3s;
transition-delay: .3s;
transform: scale(1, 1);
}
这段代码中，a:before表示在菜单项上方叠加一个白色的选中效果，a:after表示在菜单项下方叠加一个灰色背景。当鼠标悬停在菜单项上时，a:before和a:after都会进行一个过渡动画，展现出选中效果。
4. 添加JS交互
最后，我们可以用JS来实现一个交互效果，使得当用户点击菜单项时，它变为选中状态。示例代码如下：
var menuItems = document.querySelectorAll('a');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function(e) {
e.preventDefault();
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('active');
}
this.classList.add('active');
});
}
这段代码中，我们首先获取所有菜单项的DOM元素，然后遍历每一个菜单项，为其添加一个点击事件。当用户点击某一个菜单项时，我们把其它菜单项的选中状态清除，然后将当前菜单项设为选中状态。
示例说明
我们来分别说明一下两个示例的具体实现。
示例1
这个示例中，我们首先通过CSS实现了选中效果，然后通过JS交互实现了菜单的选中状态。这个示例比较简单，适合新手入门。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例1：JS+CSS实现支付宝菜单选中效果</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
}
a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
position: relative;
}
a:before, a:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
a:before {
background-color: rgba(255,255,255,0.5);
transform: scale(1.2, 1.2);
opacity: 0;
transition: all .3s ease-out;
}
a:after {
background-color: rgb(220,224,224);
transform: scale(0, 0);
opacity: 1;
transition: all .3s ease-out;
}
a:hover:before {
opacity: 1;
transform: scale(1, 1);
}
a:hover:after {
-webkit-transition-delay: .3s;
transition-delay: .3s;
transform: scale(1, 1);
}
.active {
background-color: #f00;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
<script>
var menuItems = document.querySelectorAll('a');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function(e) {
e.preventDefault();
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('active');
}
this.classList.add('active');
});
}
</script>
</body>
</html>
示例2
这个示例中，我们通过CSS实现了两种不同风格的选中效果，一种是宽度扩展，一种是高度扩展。为了实现这两种效果，我们在CSS中使用了不同的transform和transition属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例2：JS+CSS实现支付宝菜单选中效果（多种选择方式）</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
}
a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
position: relative;
}
a:before, a:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
a:before {
background-color: rgba(255,255,255,0.5);
transform: scale(1, 1);
opacity: 0;
transition: all .3s ease-out;
}
a:after {
background-color: rgb(220,224,224);
transform: scale(1, 0);
opacity: 1;
transition: all .3s ease-out;
}
a:hover:before {
opacity: 1;
transform: scale(1.2, 1.2);
}
a:hover:after {
-webkit-transition-delay: .3s;
transition-delay: .3s;
transform: scale(1, 1);
}
a.active:before {
opacity: 1;
transform: scale(1, 1);
}
a.active:after {
-webkit-transition-delay: .3s;
transition-delay: .3s;
transform: scale(1, 1);
}
a.alt:before {
background-color: #f00;
transform: scale(1, 1);
opacity: 0;
transition: all .3s ease-out;
}
a.alt:after {
background-color: #f00;
transform: scale(1, 1);
opacity: 0;
transition: all .3s ease-out;
}
a.alt:hover:before {
opacity: 1;
transform: scaleY(1.5);
}
a.alt:hover:after {
-webkit-transition-delay: .3s;
transition-delay: .3s;
transform: scaleX(1.5);
}
a.alt.active:before {
opacity: 1;
transform: scaleY(1.5);
}
a.alt.active:after {
-webkit-transition-delay: .3s;
transition-delay: .3s;
transform: scaleX(1.5);
}
</style>
</head>
<body>
<h2>宽度扩展效果</h2>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
<h2>高度扩展效果</h2>
<ul>
<li><a href="#" class="alt">菜单1</a></li>
<li><a href="#" class="alt">菜单2</a></li>
<li><a href="#" class="alt">菜单3</a></li>
<li><a href="#" class="alt">菜单4</a></li>
<li><a href="#" class="alt">菜单5</a></li>
</ul>
<script>
var menuItems1 = document.querySelectorAll('ul:first-of-type a');
for (var i = 0; i < menuItems1.length; i++) {
menuItems1[i].addEventListener('click', function(e) {
e.preventDefault();
for (var j = 0; j < menuItems1.length; j++) {
menuItems1[j].classList.remove('active');
}
this.classList.add('active');
});
}
var menuItems2 = document.querySelectorAll('ul:nth-of-type(2) a');
for (var i = 0; i < menuItems2.length; i++) {
menuItems2[i].addEventListener('click', function(e) {
e.preventDefault();
for (var j = 0; j < menuItems2.length; j++) {
menuItems2[j].classList.remove('active');
}
this.classList.add('active');
});
}
</script>
</body>
</html>
这个示例中，我们首先定义了两种选中效果，一种是宽度扩展，一种是高度扩展。这两种效果的CSS实现中，transform和transition属性都有所不同。同时，我们在HTML中分别使用了两个ul元素来展示不同的效果，在JS中也分别针对这两个元素来实现交互效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+CSS实现仿支付宝菜单选中效果代码 - Python技术站
微信扫一扫 
支付宝扫一扫 