简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 求推薦一個jquery滑動塊插件，功能很簡單
某草草
某草草 2017-05-19 10:35:24
0
4
642

需要這樣一個滑桿插件，很簡單，但是從網路上找了好久找不到合適的，求大神推薦一個，可以依賴jquery，但不要依賴jquery ui和其他函式庫

某草草
某草草

全部回覆(4)
左手右手慢动作
左手右手慢动作2017-05-19 10:37:24 4樓

抽了點時間，寫了一個，不知道符合規則不
傳送門：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>
點贊 +0
新增回覆
滿天的星座
滿天的星座2017-05-19 10:37:24 3樓

bootstrap-slider

可以用一下這個，我用過還可以。

點贊 +0
新增回覆
Peter_Zhu
Peter_Zhu2017-05-19 10:37:24 2樓

input range就可以呀.
如果要考慮相容性可以試試 nouislider (https://refreshless.com/nouis...

點贊 +0
新增回覆
漂亮男人
漂亮男人2017-05-19 10:37:24 1樓

這麼簡單的需求, 又找了許久找不到, 那為什麼不自己寫一個呢?

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！