communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Veuillez recommander un plug-in JQuery Slider, la fonction est très simple
某草草
某草草 2017-05-19 10:35:24
0
4
734

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)
左手右手慢动作
左手右手慢动作2017-05-19 10:37:24 4 plancher

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>
Comme +0
Ajouter une réponse
滿天的星座
滿天的星座2017-05-19 10:37:24 3 plancher

bootstrap-slider

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

Comme +0
Ajouter une réponse
Peter_Zhu
Peter_Zhu2017-05-19 10:37:24 2 plancher

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

Comme +0
Ajouter une réponse
漂亮男人
漂亮男人2017-05-19 10:37:24 1 plancher

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.

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal