将百分比转换为像素 [英] Convert percent to pixel

问题描述

我正在使用此自定义JavaScript范围滑块，我想能够设置以像素为单位的最小值和最大值.默认值为百分比，范围是0-100.

I'm using this custom JavaScript range slider, and I want to be able to set a min and max value in pixels. The default is percentage, from 0 - 100.

我能够实现最小和最大设置.下一步是将所有百分比转换为像素量.我可以使用 drag函数来做到这一点，但是我却很难为 value 做到这一点.

I was able to implement a min and max setting. The next step is to convert all the percentage to a pixel amount. I was able to do that for the drag function, but I'm having trouble doing it for value.

当我将值设置为50而不是50px时，它将变为50％.如何将所有百分比更改为像素?

When I set value to, say 50, instead of going to 50px, it goes to 50%. How can I change all the percentages to pixels?

如果您有更好的方法，请告诉我.

If you have a better way of doing this, please let me know.

我认为这是要更改的主要代码.它在最后一个功能中.它叫做 initDragger :

I think this is the main code to change. It's in the last function. It's called initDragger:

cachePosition = ((config.value / 100) * range[!isVertical ? 'offsetWidth' : 'offsetHeight']);
dragger.style[!isVertical ? 'left' : 'top'] = (cachePosition - (woh / 2)) + 'px';

JSFiddle

function rangeSlider(elem, config) {

  var html = document.documentElement,
    range = document.createElement('div'),
    dragger = document.createElement('span'),
    down = false,
    rangeWidth, rangeOffset, draggerWidth, cachePosition;

  var defaults = {
    min: 20,
    max: 150,
    value: 0, // set default value on initiation from `0` to `100` (percentage based)
    vertical: false, // vertical or horizontal?
    rangeClass: "", // add extra custom class for the range slider track
    draggerClass: "", // add extra custom class for the range slider dragger
    drag: function(v) { /* console.log(v); */ } // function to return the range slider value into something
  };

  for (var i in defaults) {
    if (typeof config[i] == "undefined") config[i] = defaults[i];
  }

  function addEventTo(el, ev, fn) {
    if (el.addEventListener) {
      el.addEventListener(ev, fn, false);
    } else if (el.attachEvent) {
      el.attachEvent('on' + ev, fn);
    } else {
      el['on' + ev] = fn;
    }
  }

  var isVertical = config.vertical;

  elem.className = (elem.className + ' range-slider ' + (isVertical ? 'range-slider-vertical' : 'range-slider-horizontal')).replace(/^ +/, "");
  range.className = ('range-slider-track ' + config.rangeClass).replace(/ +$/, "");
  dragger.className = ('dragger ' + config.draggerClass).replace(/ +$/, "");

  addEventTo(range, "mousedown", function(e) {
    html.className = (html.className + ' no-select').replace(/^ +/, "");
    rangeWidth = range[!isVertical ? 'offsetWidth' : 'offsetHeight'];
    rangeOffset = range[!isVertical ? 'offsetLeft' : 'offsetTop'];
    draggerWidth = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
    down = true;
    updateDragger(e);
    return false;
  });

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

  addEventTo(document, "mouseup", function(e) {
    html.className = html.className.replace(/(^| )no-select( |$)/g, "");
    down = false;
  });

  addEventTo(window, "resize", function(e) {
    var woh = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
    dragger.style[!isVertical ? 'left' : 'top'] = (((cachePosition / 100) * range[!isVertical ? 'offsetWidth' : 'offsetHeight']) - (woh / 2)) + 'px';
    down = false;
  });

  function updateDragger(e) {
    e = e || window.event;
    var pos = !isVertical ? e.pageX : e.pageY;
    if (!pos) {
      pos = !isVertical ? e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft : e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    if (down && pos >= rangeOffset && pos <= (rangeOffset + rangeWidth)) {
      dragger.style[!isVertical ? 'left' : 'top'] = (pos - rangeOffset - (draggerWidth / 2)) + 'px';
      cachePosition = Math.round(((pos - rangeOffset) / rangeWidth) * 100);
      cachePositionPixel = Math.round(((cachePosition / 100) * (config.max - config.min)) + config.min);
      config.drag(cachePositionPixel);
    }
  }

  function initDragger() {
    var woh = dragger[!isVertical ? 'offsetWidth' : 'offsetHeight'];
    cachePosition = ((config.value / 100) * range[!isVertical ? 'offsetWidth' : 'offsetHeight']);
    dragger.style[!isVertical ? 'left' : 'top'] = (cachePosition - (woh / 2)) + 'px';
    config.drag(config.value);
  }

  range.appendChild(dragger);
  elem.appendChild(range);

  initDragger();

}

var slide = document.getElementById('range-slider');
var resultP = document.getElementById('results');
var button = document.getElementById('button');

rangeSlider(slide, {
  value: 50,
  drag: function(v) {
    document.getElementById('results').innerHTML = "Your Current Value is: " + v;
  },
  max: 60
});

.range-slider-track {
  height: 20px;
}
.range-slider-track:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: black;
}
.range-slider-track .dragger {
  display: block;
  width: 10px;
  height: inherit;
  position: relative;
  background-color: red;
}

<div id="range-slider"></div>
<p id="results"></p>

推荐答案

到目前为止，对于我来说几乎已经成为习惯，我将提供此答案.

As has become almost customary for me by now, I will offer this answer.

document.getElementById('clickme').onclick = function() {
  document.getElementById('slider').value = 37;
};

<input type="range" min="2" max="40" value="23" id="slider" />
<button id="clickme">Set "pixel" to 37</button>

解决问题的最佳方法通常是最简单的方法.

The best solution to a problem is usually the easiest one.

这篇关于将百分比转换为像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！