css+js实现横向图文列表卡片可拖动滚动控制效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css+js实现横向图文列表卡片可拖动滚动控制效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
 <style>
     :root {
    --accent: rgb(212, 255, 0);
    --accent-hover: rgb(190, 228, 0);
    --accent-active: #72d534;
    --control: #49aa00;
    --secondary: #ECEFEB;
    --secondary-hover: #E0E4DE;
    --secondary-active: #6c6c6b;
    --headline-color: rgba(100, 105, 150, 1);
    --event-text: rgba(29, 32, 59, 1);
    --success: rgba(80, 189, 85, 1);
    --error: rgba(232, 113, 113, 1);
    --white: rgba(255, 255, 255, 1);
    --accent-text: #163300;
}

body {
    padding: 16px;
    display: flex;
    height: 100vh;
    min-width: 320px;
    font-family: "Inter", sans-serif;
}

* {
    box-sizing: border-box;
}

.top-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    width: 100%;
    flex-direction: row;
    color: var(--headline-color);
}

.top-bar h2 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.top-bar svg {
    color: var(--headline-color);
}

.action-buttons {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    scroll-snap-align: start;
    width: 100%;
    flex-wrap: wrap;
}

.action-button {
    color: var(--accent-text);
    border-radius: 1rem;
    height: 2rem;
    gap: 0.25rem;
    cursor: pointer;
    display: flex;
    padding: 0 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    align-items: center;
    text-decoration: none;
    background: var(--secondary);
}

.action-button--primary:active {
    background: var(--accent-active);
}

.action-button:active {
    background: var(--secondary-active);
}


.action-button--horizontal-scroll {
    border-radius: 50%;
    cursor: pointer;
    border: none;
    outline: none;
    width: 2rem;
    height: 2rem;
    background: var(--accent);
}

.action-button--horizontal-scroll:hover {
    background: var(--accent-hover);
}

.action-button--horizontal-scroll:active {
    background: var(--accent-active);
}

.action-button--horizontal-scroll:disabled {
    cursor: not-allowed;
    background: var(--secondary);
}

.action-button--horizontal-scroll:disabled:hover {
    background: var(--secondary);
}

.action-button--horizontal-scroll:disabled:active {
    background: var(--secondary);
}

#action-button--previous {
    margin-left: auto;
    transform: rotate(-90deg);
}

#action-button--next {
    transform: rotate(90deg);
}

.action-button:hover {
    background: var(--secondary-hover);
}

.action-button--primary {
    background: var(--accent);
}

.action-button--primary:hover {
    background: var(--accent-hover);
}

.action-button--primary:active {
    background: var(--accent-active);
}

#events {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0px;
    width: 100%;
    flex-direction: row;
    overflow: auto;
}

.event {
    appearance: none;
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease-in-out;
    min-width: 20rem;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: start;
    overflow: hidden;
    color: rgba(29, 32, 59, 1);
}

.event__image {
    position: relative;
}

.event__indicator {
    position: absolute;
    padding: 0.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    align-items: center;
    border-radius: 0.5rem;
}

.event__date {
    top: 0.5rem;
    left: 0.5rem;
    font-size: 1.35rem;
}

.event__date__month {
    font-size: 0.6rem;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--event-headline);
}

.event__type {
    top: 0.5rem;
    right: 0.5rem;
}

.event__type svg {
    color: var(--event-text);
    height: 2rem;
    width: 2rem;
}

.event-description {
    color: var(--event-text);
    padding: 0.5rem 0.75rem;
}

.event img {
    width: 100%;
    height: 15rem;
    border-radius: 1rem;
    object-fit: cover;
    object-position: top;
}

.event h2 {
    font-size: 1.375rem;
    letter-spacing: normal;
    overflow-wrap: normal;
    white-space: nowrap;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--event-headline);
    overflow: hidden;
    text-overflow: ellipsis;
}

.bottom-stats {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    flex-direction: row;
    color: var(--headline-color);
}

.bottom-stat {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-direction: row;
}

.container {
    max-width: 50rem;
    width: 100%;
    min-width: 18rem;
    margin: 7.5rem auto;
}

.circle {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
}

.circle--green {
    background: var(--success);
}

.circle--red {
    background: var(--error);
}
 </style>
</head>

<body>
    <div class="container">
        <div class="top-bar">
            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z" />
                <path d="M16 3v4" />
                <path d="M8 3v4" />
                <path d="M4 11h16" />
                <path d="M7 14h.013" />
                <path d="M10.01 14h.005" />
                <path d="M13.01 14h.005" />
                <path d="M16.015 14h.005" />
                <path d="M13.015 17h.005" />
                <path d="M7.01 17h.005" />
                <path d="M10.01 17h.005" />
            </svg>
            <h2>
                Upcoming events
            </h2>

            <button type="button" disabled id="action-button--previous" class="action-button--horizontal-scroll">
                <svg width="16" height="16" fill="currentColor" focusable="false" viewBox="0 0 24 24">
                    <path
                        d="M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z">
                    </path>
                </svg>
            </button>
            <button type="button" id="action-button--next" class="action-button--horizontal-scroll">
                <svg width="16" height="16" fill="currentColor" focusable="false" viewBox="0 0 24 24">
                    <path
                        d="M12.771 7.115a.829.829 0 0 0-1.2 0L3 15.686l1.2 1.2 7.971-7.971 7.972 7.971 1.2-1.2-8.572-8.571Z">
                    </path>
                </svg>
            </button>
        </div>
        <div id="events">
            <a href="#the-weeknd" class="event">
                <div class="event__image">
                    <img src="//repo.bfw.wiki/bfwrepo/image/65c56875ac982.png" alt="The Weeknd">
                    <div class="event__indicator event__date">
                        08 <div class="event__date__month">
                            Feb
                        </div>
                    </div>
                    <div class="event__indicator event__type">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                            stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 5l0 2" />
                            <path d="M15 11l0 2" />
                            <path d="M15 17l0 2" />
                            <path
                                d="M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2" />
                        </svg>
                    </div>

                </div>
                <div class="event-description">
                    <h2>
                        The Weeknd - After Hours Tour
                    .........完整代码请登录后点击上方下载按钮下载查看