实现底部表情评价，聚焦改变颜色，点击坏评价自动变成好评价

如下，非常简单的一个小玩意。

废话不多说直接上代码：

<!--
 * @轮子的作者: 轮子哥
 * @Date: 2024-05-22 10:43:45
 * @LastEditTime: 2024-05-24 10:28:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .emoji {
      background: #eee;
      margin: 20px;
      padding: 10px;
      border-radius: 20px;
      text-align: center;
    }

    .emoji>p {
      margin: 10px;
    }

    .emoji-list {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
    }

    .emoji-item {
      filter: grayscale(100);
      cursor: pointer;
      font-size: 30px;
      height: 60px;
      width: 60px;
      line-height: 60px;
      transform: rotate(0deg);
      transition: filter 1.5s ease, font-size 0.5s ease, transform 1.5s ease;
    }

    .emoji-selected {
      filter: grayscale(0);
      font-size: 35px;
    }

    @media (any-hover: hover) {
      .emoji-item:hover {
        filter: grayscale(0);
        font-size: 35px;
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <section>

    <div class="emoji">
      <p>Would you find this answer helpful?</p>
      <div class="emoji-list">
        <div class="emoji-item" onclick="selectEmoji(this)">😞</div>
        <div class="emoji-item" onclick="selectEmoji(this)">😑</div>
        <div class="emoji-item" onclick="selectEmoji(this)">😄</div>
      </div>
    </div>

  </section>

</body>
<script>
  function selectEmoji(emojiItem) {
    const emojiItems = document.querySelectorAll('.emoji-item');
    switch (emojiItem.textContent) {
      case '😞':
        const direction1 = emojiItem.style.transform == '' || emojiItem.style.transform.includes('0.1') ? '-200' : '0.1';
        const direction2 = emojiItem.style.transform == '' || emojiItem.style.transform.includes('0.1') ? '200' : '0.1';
        emojiItems.forEach((item) => {
          if (item.textContent == '😄') {
            item.style.transform = `translateX(${direction1}%)`
            item.classList.add('emoji-selected');
          } else {
            item.classList.remove('emoji-selected')
          }
        });
        emojiItem.style.transform = `translateX(${direction2}%)`
        console.log("轮")
        break;
      default:
        emojiItems.forEach(item => item.classList.remove('emoji-selected'));
        emojiItem.classList.add('emoji-selected');
        console.log("子")
        break;
    }
  }
</script>

</html>

使用grayscale实现聚焦变颜色，用@media (any-hover: hover) {}来解决移动端hover触发的问题，再加点过渡效果，css样式就写好了，还是非常简单的。

js就简单的改变方向平移和增删选中类，非常简单就不多说了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/636860.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！