简体中文(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
641

需要这样一个滑块插件，很简单，但是从网上找了好久找不到合适的，求大神推荐一个，可以依赖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学习者快速成长！