简单纯粹的JavaScript拖动控制滑块

Question

简单纯粹的JavaScript拖动控制滑块

javascriptslideronmousedownonmousemove

11

世界各地的开发者们，你们好。

我想要在纯Javascript中得到一些帮助，制作一个简单的、不需要JQuery或其他库的拖动控制滑块，代码只有30行。

我已经搜索了数月，发现了许多脚本，但我不喜欢-Jquery，因为大多数脚本都需要4、5、6个javascript文件。我更喜欢更小、更基础的脚本。我希望自己可以根据需要进行调整，并且可以从较小的脚本中学到很多东西。

我所需要的仅仅是一个简单的滑块，用于：重新缩放图像、滚动页面、更改图像亮度（使用PHP）等等。

我是Javascript新手（2个月），这是我目前的水平。抱歉变量名不好。

    <script type="text/javascript">  
      _item = null;
      mouse_x = 0;
      drag_x = 0; 
      function move_init() {
        document.onmousemove = _move;
        document.onmouseup = _stop;
      }
      function _stop(){
         _item = null;
      }
      function _move(e){
        mouse_x = document.all ? window.event.clientX : e.pageX;
        if(_item != null){
             _item.style.left = (mouse_x - drag_x) + "px";
        }
      }
      function _move_item(drag)
      {
        _item = drag;
        drag_x = mouse_x - _item.offsetLeft;
      }
move_init();
drag.onmousedown=_move_item();   // Agh.. did'nt figure out how this works
</script>

<style type="text/css">
#drag{background:#797979;color:#fff;width:30px;height:15px;position:relative;}
#track{background:red; width:200px;}
</style>

<div id="track"><div id="drag" onmousedown="_move_item(this);" >x</div></div>

我感激你的帮助。

我写于2012年12月31日。祝新年快乐。请善待对方。

谢谢。

- Stone Pentecost

嗨，@user1938684，如果你正在寻找代码审查，请在http://codereview.stackexchange.com上发布。否则，如果您对此代码有特定的问题或问题，请随时明确说明。目前来看，不清楚您需要什么样的帮助。 - kojiro

如果有人能给我一段代码，我会很高兴。我的代码没有被贴出来进行审查，更多的是为了验证我正在寻找的东西。请给我一段代码，然后我就会很开心并继续我的开发。 - Stone Pentecost

你有没有偶然找到那段代码？我也在找同样的代码，但还没有结果。 - user1111929

1

可能是简单JavaScript滑块吗？的重复。 - UnkwnTech

对于刚开始学习的开发者，可以使用输入类型range，让浏览器为您完成工作：<input type="range" name="points" min="0" max="10"> 预览：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_range - Tofandel

2个回答

2

看一下 DragDealer.js：https://skidding.github.io/dragdealer/

这里有一个根据滑块值改变图像不透明度的示例。

希望这可以帮到你！

- w3bshark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Taufik Nurrohman · Accepted Answer

这段代码在现代浏览器中可用。只需为addEventListener创建一些polyfill，这个自定义范围滑块就可以安全使用：

function rangeSlider(id, onDrag) {

    var range = document.getElementById(id),
        dragger = range.children[0],
        draggerWidth = 10, // width of your dragger
        down = false,
        rangeWidth, rangeLeft;

    dragger.style.width = draggerWidth + 'px';
    dragger.style.left = -draggerWidth + 'px';
    dragger.style.marginLeft = (draggerWidth / 2) + 'px';

    range.addEventListener("mousedown", function(e) {
        rangeWidth = this.offsetWidth;
        rangeLeft = this.offsetLeft;
        down = true;
        updateDragger(e);
        return false;
    });

    document.addEventListener("mousemove", function(e) {
        updateDragger(e);
    });

    document.addEventListener("mouseup", function() {
        down = false;
    });

    function updateDragger(e) {
        if (down && e.pageX >= rangeLeft && e.pageX <= (rangeLeft + rangeWidth)) {
            dragger.style.left = e.pageX - rangeLeft - draggerWidth + 'px';
            if (typeof onDrag == "function") onDrag(Math.round(((e.pageX - rangeLeft) / rangeWidth) * 100));
        }
    }

}

示例用法

<style>
.range-slider {
  width:300px;
  height:20px;
  margin:0 auto 1em;
  position:relative;
  cursor:e-resize;
}
.range-slider:before {
  content:"";
  display:block;
  position:absolute;
  top:9px;
  left:0;
  width:100%;
  height:2px;
  background-color:black;
}
.range-slider span {
  display:block;
  height:inherit;
  position:relative;
  z-index:2;
  background-color:red;
  cursor:inherit;
}
</style>

<div class="range-slider" id="range-slider-1">
  <span></span>
</div>

<script>
rangeSlider('range-slider-1', function(value) {
    document.getElementById('test-area').innerHTML = value + '%';
});
</script>

演示: http://jsbin.com/dulifezi/2/edit

更新

我在这里为这段代码创建了一个存储库 → https://github.com/taufik-nurrohman/range-slider