JS+CSS实现仿支付宝菜单选中效果代码-前端开发

下面我将为你详细讲解“JS+CSS实现仿支付宝菜单选中效果代码”的完整攻略。

下面我将为你详细讲解“JS+CSS实现仿支付宝菜单选中效果代码”的完整攻略。

背景

支付宝的菜单选中效果非常优美，用户对于选中菜单项有一个非常直观的反馈。因此，很多网站尝试模仿这种效果，提高用户的体验。

效果演示

在开始之前，我先给你演示一下最终的效果。你可以访问以下链接，预览动态效果：

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中也分别针对这两个元素来实现交互效果。