day32-Good Cheap Fast（三选二滚动效果）_cheap good fast按钮-CSDN博客

本文链接：https://blog.csdn.net/qq_51523316/article/details/131872275

该文章展示了如何使用HTML、CSS和JavaScript创建一个三选二的滚动效果，用户在“好”、“便宜”、“快”这三个选项中只能选择两个。当用户点击其中一个复选框时，JavaScript会确保只有两个选项被选中，同时利用CSS实现了球体在切换状态时的滑动动画效果。

摘要由CSDN通过智能技术生成

50 天学习 50 个项目 - HTMLCSS and JavaScript

day32-Good Cheap Fast（三选二滚动效果）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Good, Cheap, Fast</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <h2>你希望你的项目是怎样的?</h2>
    <!-- 切换容器1 -->
    <div class="toggle-container">
        <input type="checkbox" id="good" class="toggle">
        <label for="good" class="label">
            <div class="ball"></div>
        </label>
        <span>好的</span>
    </div>
    <!-- 切换容器2 -->
    <div class="toggle-container">
        <input type="checkbox" id="cheap" class="toggle">
        <label for="cheap" class="label">
            <div class="ball"></div>
        </label>
        <span>便宜</span></span></span>
    </div>
    <!-- 切换容器3 -->
    <div class="toggle-container">
        <input type="checkbox" id="fast" class="toggle">
        <label for="fast" class="label">
            <div class="ball"></div>
        </label>
        <span>快速</span>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    /* 居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 切换容器 */
.toggle-container {
    display: flex;
    align-items: center;
    margin: 10px 0;
    width: 200px;
}

/* checkbox 隐藏且无法触发点击事件 */
.toggle {
    visibility: hidden;
}

/* 标签 点击label标签即可勾选 */
.label {
    position: relative;
    background-color: #d0d0d0;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    margin: 0 15px 0;
    width: 80px;
    height: 40px;
}

/* +: 这是CSS中的相邻兄弟选择器，用于选择紧接在指定元素后面的兄弟元素。 */
.toggle:checked+.label {
    background: url('https://source.unsplash.com/random') no-repeat center/cover;
}

/* 标签类的球 */
.ball {
    background: #fff;
    /* 球形 */
    height: 34px;
    width: 34px;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    align-items: center;
    justify-content: center;
    /* forwards表示在动画结束时，元素将保持动画执行的最后一帧的样式状态。 */
    animation: slideOff 0.3s linear forwards;
}

/* 选中时 */
.toggle:checked+.label .ball {
    animation: slideOn 0.3s linear forwards;
}

@keyframes slideOn {
    0% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(20px) scale(1.2);
    }

    100% {
        transform: translateX(40px) scale(1);
    }
}

@keyframes slideOff {
    0% {
        transform: translateX(40px) scale(1);
    }

    50% {
        transform: translateX(20px) scale(1.2);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}

script.js

// 重点 flex animation keyframes
// 1.获取元素节点
const toggles = document.querySelectorAll('.toggle')//checkbox
const good = document.querySelector('#good')//good checkbox
const cheap = document.querySelector('#cheap')//cheap checkbox
const fast = document.querySelector('#fast')//fast checkbox
// 2.遍历 绑定change事件
toggles.forEach(toggle => toggle.addEventListener('change', (e) => doTheTrick(e.target)))
// 函数
function doTheTrick(theClickedOne) {
    // 如果三者都选中 theClickedOne->当前点击的那一个
    if (good.checked && cheap.checked && fast.checked) {
        // 为good fast不要checked
        if (good === theClickedOne) {
            fast.checked = false
        }
        // 为cheap good不要checked
        if (cheap === theClickedOne) {
            good.checked = false
        }
        // 为fast cheap不要checked
        if (fast === theClickedOne) {
            cheap.checked = false
        }
    }
}