Question

嗨世界各地的开发者。

我想帮助一个简单，纯粹的Javascript （30行），JQuery free （和其他库） 拖动控制滑块。< /强>

我一直在搜索几个月，发现很多脚本，但我不喜欢-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日写了这篇文章。祝新年快乐。请互相帮助。

谢谢。

Answer 1

此代码适用于现代浏览器。只需为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

更新

我正在为此代码段创建一个repo→https://github.com/tovic/range-slider

Answer 2

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

这里有一个基于滑块值改变图像不透明度的例子。

希望这有帮助！

简单的纯Javascript拖动控制器滑块

2 个答案:

使用示例

更新