Rumah  >  Soal Jawab  >  teks badan

javascript - Sila cadangkan pemalam gelangsar jquery, fungsinya sangat mudah

Saya memerlukan pemalam gelangsar sebegitu Ia sangat mudah, tetapi saya telah lama mencari di Internet dan tidak dapat mencari yang sesuai Anda boleh bergantung pada jquery, tetapi jangan bergantung pada jquery ui dan perpustakaan lain

某草草某草草2734 hari yang lalu687

membalas semua(4)saya akan balas

  • ringa_lee

    ringa_lee2017-05-19 10:37:24

    Saya mengambil sedikit masa dan menulis satu. Saya tidak tahu sama ada ia mematuhi peraturan Portal: 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>

    balas
    0
  • 滿天的星座

    滿天的星座2017-05-19 10:37:24

    bootstrap-slider

    Anda boleh menggunakan ini, saya telah menggunakannya dan tidak mengapa.

    balas
    0
  • 天蓬老师

    天蓬老师2017-05-19 10:37:24

    Julat input sahaja.
    Jika anda ingin mempertimbangkan keserasian, anda boleh mencuba nouislider (https://refreshless.com/nouis...

    balas
    0
  • 漂亮男人

    漂亮男人2017-05-19 10:37:24

    Saya tidak menjumpai keperluan yang begitu mudah selepas mencari untuk masa yang lama, jadi mengapa tidak menulisnya sendiri?

    Pesta hulur tangan memang berleluasa, baru pijak aku.

    balas
    0
  • Batalbalas