简单的纯Javascript拖动控制器滑块 [英] Simple pure Javascript drag controller slider

问题描述

嗨世界各地的开发者。

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

I would like to have some help with a simple, pure Javascript (30 lines), JQuery free (and other library's) drag control slider.

我一直在搜索几个月但发现很多脚本但是我不喜欢-Jquery因为大多数脚本需要4,5,6个javascript包括..我更喜欢较小的基本脚本..我喜欢像我想要的那样调整它们，我也可以从较小的脚本中倾斜。

I have been searching months and found many scripts but i don't like -Jquery cause most script need 4, 5, 6 javascript includes.. I prefer smaller and basic script.. i like to ajust them like i want and i also can lean alot from smaller scripts.

我需要的是一个简单的滑块，我可以用它：重新缩放图像，滚动页面，改变图像上的亮度（用PHP）等。

All i need is a simple slider that i can use for: rescale images, scroll page, change brightness on images (with PHP) etc.

我是新手javascript （2个月），这是我现在的距离...对不好的变量名称...

I am new with javascript (2 months), this is how far i get now.. Sorry for the bad variable names...

    <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日写的。祝新年快乐。请互相帮助。

I wrote this on 31 december 2012.. So happy new year. Please be good for each other.

谢谢。

推荐答案

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

This code works in modern browsers. Just create some polyfill for that addEventListener and this custom range slider will be safe to use:

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));
        }
    }

}

示例用法

Example Usage

<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/tovic/range-slider

I’m creating a repo for this snippet here → https://github.com/tovic/range-slider

这篇关于简单的纯Javascript拖动控制器滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！