TweenMax实现拖动滑块效果代码-html代码-BFW代码库

TweenMax实现拖动滑块效果代码

代码语言：html

所属分类：拖放

代码描述：TweenMax实现拖动滑块效果代码

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

<html>
<head>
    <style>
        body {
            height: 100vh;
            width: 100vw;
            display: flex;
            background: #1E88E5;
            overflow: hidden;
        }

        #container {
            margin: auto;
        }
        #container .total {
            width: 400px;
            height: 24px;
            position: relative;
            cursor: pointer;
        }
        #container .total > div {
            height: 100%;
            border-radius: 16px;
            pointer-events: none;
            position: absolute;
        }
        #container .total .previous {
            top: 4px;
            left: 0px;
            height: 16px;
            background: #FDD835;
            width: calc(((100% / 6)*3) - 32px);
        }
        #container .total .current {
            background: #F44336;
            width: 24px;
            top: 0px;
            left: calc(((100% / 6)*3) - 12px);
            display: flex;
        }
        #container .total .current span {
            margin: auto;
            color: white;
            font-family: sans-serif;
            font-weight: bolder;
            display: none;
        }
        #container .total .next {
            top: 4px;
            right: 0px;
            height: 16px;
            background: #FDD835;
            width: calc(((100% / 6)*3) - 32px);
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
</head>
<body>
    <div id="container">
        <div class="total">
            <div class="previous" style="width: 126px;"></div>
            <div class="current" style="left: 142px; transform: scale(1);">
                <span>4</span>
            </div>
            <div class="next" style="width: 218px;"></div>
        </div>
        <div>
            <script>
                const steps = 6;

                let current = {
                    value: 3
                };

                let total = document.querySelector(".total");

                const currentDiv = document.querySelector(".current");
                const previousDiv = document.querySelector(".previous");
                const nextDiv = document.querySelector(".next");

                changeStep(2);

                total.addEventListener("click", function(e) {
                    let x = e.offsetX / (total.offsetWidth / (steps + 1));

                    changeStep(x);

                    TweenLite.to(currentDiv.style, 0.25, {
                        ease: Power3.easeInOut,
                        transform: "scale(1.5)",
                        onComplete: () => {
                            TweenLite.to(currentDiv.style, 0.75, {
                                ease: Elastic.easeOut.config(1, 0.3),
                                transform:.........完整代码请登录后点击上方下载按钮下载查看