javascript - Veuillez recommander un plug-in JQuery Slider, la fonction est très simple
某草草
某草草 2017-05-19 10:35:24
0
4
701

J'ai besoin d'un tel plug-in de curseur. C'est très simple, mais je cherche depuis longtemps sur Internet et je n'en trouve pas un qui me convient. Vous pouvez compter sur jquery, mais ne comptez pas sur jquery. interface utilisateur et autres bibliothèques

某草草
某草草

répondre à tous(4)
左手右手慢动作

J'ai pris du temps et j'en ai écrit un. Je ne sais pas s'il est conforme aux règles. Portail : https://jsfiddle.net/0u17c6r0/

.

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .ranger {
            width: 200px;
            height: 10px;
            border-radius: 5px;
            background: lightgrey;
            position: relative;
            margin: 100px auto;
        }
        .dot {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 0;
            top:-5px;
            background: #227dc5;
            border-radius: 10px;
            cursor: pointer;
        }
        .tip {
            position: absolute;
            width: 60px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            left: -20px;
            top: -30px;
            background: #227dc5;
            color: white;
        }
        .tip:before{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 5px transparent solid;
            border-top-color: #227dc5;
            left: 25px;
            top: 25px;
        }
    </style>
</head>
<body>
    <p class="ranger">
        <p class="dot">
            <p class="tip">0%</p>
        </p>
    </p>
    <script type="text/javascript">
        var dot = document.querySelector('.dot'),
            tip = document.querySelector('.tip'),
            startX = 0,
            dotX = 0;
        
        dot.addEventListener('mousedown', mouseDown);
        document.addEventListener('mouseup', mouseUp);

        function mouseDown(e) {
            startX = e.clientX;
            dotX = dot.offsetLeft;
            document.addEventListener('mousemove', mouseMove);
        }

        function mouseUp() {
            document.removeEventListener('mousemove', mouseMove);
        }

        function mouseMove(e) {
            var left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180),
                percentage = parseInt(left/1.8)+'%';
            tip.innerText = percentage;
            dot.style.left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180)+'px';
        }
    </script>
</body>
</html>
滿天的星座

bootstrap-slider

Vous pouvez l’utiliser, je l’ai utilisé et tout va bien.

Peter_Zhu

Juste la plage de saisie.
Si vous souhaitez considérer la compatibilité, vous pouvez essayer nouislider (https://refreshless.com/nouis...

漂亮男人

Je n'ai pas trouvé une exigence aussi simple après avoir longtemps cherché, alors pourquoi ne pas en écrire une moi-même ?

La fête de sensibilisation est vraiment endémique, ils viennent de me marcher dessus.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal