简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Sila cadangkan pemalam gelangsar jquery, fungsinya sangat mudah
某草草
某草草 2017-05-19 10:35:24
0
4
655

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

某草草
某草草

membalas semua(4)
左手右手慢动作
左手右手慢动作2017-05-19 10:37:24 Tingkat 4

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>
Suka +0
Tambah Balasan
滿天的星座
滿天的星座2017-05-19 10:37:24 Tingkat 3

bootstrap-slider

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

Suka +0
Tambah Balasan
Peter_Zhu
Peter_Zhu2017-05-19 10:37:24 Tingkat 2

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

Suka +0
Tambah Balasan
漂亮男人
漂亮男人2017-05-19 10:37:24 Tingkat 1

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.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！