簡體   English   中英

將百分比轉換為像素

[英]Convert percent to pixel

我正在使用此自定義JavaScript范圍滑塊 ,並且希望能夠以像素為單位設置最小值和最大值。 缺省值為百分比,范圍是0-100。

我能夠實現最小和最大設置。 下一步是將所有百分比轉換為像素量。 我能夠通過drag function做到這一點,但是我很難做到value

當我將值設置為50而不是50px時,它將變為50%。 如何將所有百分比更改為像素?

如果您有更好的方法,請告訴我。

我認為這是要更改的主要代碼。 它在最后一個功能中。 它稱為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> 

https://github.com/tovic/simple-custom-range-slider-將此網站滾動到底部,有一個答案:

var min = 2, max = 40;

function pixelToPercent(pixel) {
    return ((pixel - min) / (max - min)) * 100;
}

function percentToPixel(percent) {
    return ((percent / 100) * (max - min)) + min;
}

rangeSlider(document.getElementById('range-slider-1'), {
    value: pixelToPercent(10),
    drag: function(v) {
        document.getElementById('result-area').innerHTML = Math.round(percentToPixel(v));
    }
});

到目前為止,對於我來說幾乎已經成為習慣,我將提供此答案。

 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> 

解決問題的最佳方法通常是最簡單的方法。

它有點笨重,相距5像素,起始於21像素,因此需要進行微調。 函數tickDragDist()代碼的改編。 tickDragDist()測量.dragger.tick之間的距離(附加到.range-slider的標簽; .tick是參考點。)

http://plnkr.co/edit/EckPp81v7xYNHnAArCOt?p=preview

在此處輸入圖片說明

  function rangeSlider(elem, config) { var html = document.documentElement, range = document.createElement('div'), dragger = document.createElement('span'), tick = document.querySelector('.tick'), 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 result = document.getElementById('results'); var button = document.getElementById('button'); var rng = rangeSlider(slide, { value: 0, drag: function(v) { var d = tickDragDist(); document.getElementById('results').value = 'Relative: '+v+'% | Fixed: '+d; }, max: 100 }); // Calculates the distance between .tick and .dragger function tickDragDist() { var tick = document.querySelector('.tick'); var drag = document.querySelector('.dragger'); var tickPos = tick.getBoundingClientRect(); var dragPos = drag.getBoundingClientRect(); var tickX = tickPos.left + tickPos.width/2; var tickY = tickPos.top + tickPos.height/2; var dragX = dragPos.left + dragPos.width/2; var dragY = dragPos.top + dragPos.height/2; var distSQ = Math.pow(tickX - dragX, 2) + Math.pow(tickY - dragY, 2); var dist = Math.sqrt(distSQ); return dist; } 
  .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; } .range-slider-track .tick { height: 5px; width: 0; position: absolute; left: 0; top: calc(50% - 2.5px); display: inline-block; } 
 <div id="range-slider"> <label for="range-slider" class="tick">0</label> </div> <label for="results">Lengths: <output id="results"></output> px</label> 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM