国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社區(qū)

學(xué)習(xí)

工具庫

AI工具

休閑

簡體中文

javascript - 求推薦一個jquery滑動塊插件，功能很簡單

某草草 2017-05-19 10:35:24

844

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

某草草

全部回復(fù)(4)

左手右手慢動作2017-05-19 10:37:24 4 樓

抽了點時間，寫了一個，不知道符合規(guī)則不
傳送門：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>