Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
javascript - Bitte empfehlen Sie ein JQuery-Slider-Plug-In, die Funktion ist sehr einfach
某草草
某草草 2017-05-19 10:35:24
0
4
739

Ich brauche ein solches Slider-Plugin, aber ich habe lange im Internet gesucht und kein passendes gefunden. Sie können sich auf jquery verlassen, aber verlassen Sie sich nicht auf jquery ui und andere Bibliotheken

某草草
某草草

Antworte allen(4)
左手右手慢动作
左手右手慢动作2017-05-19 10:37:24 4 Etage

抽了点时间，写了一个，不知道符合规则不
传送门：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>
Wie +0
Antwort hinzufügen
滿天的星座
滿天的星座2017-05-19 10:37:24 3 Etage

bootstrap-slider

可以用一下这个，我用过还可以。

Wie +0
Antwort hinzufügen
Peter_Zhu
Peter_Zhu2017-05-19 10:37:24 2 Etage

input range就可以呀.
如果要考虑兼容性可以试试 nouislider (https://refreshless.com/nouis...

Wie +0
Antwort hinzufügen
漂亮男人
漂亮男人2017-05-19 10:37:24 1 Etage

这么简单的需求, 又找了许久找不到, 那为什么不自己写一个呢?

伸手党真是猖狂，直接就踩我了。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage