以百分比获取光标位置

Posted 2023-03-06

【中文标题】以百分比获取光标位置

【英文标题】：Get cursors position in percentage

【发布时间】：2016-11-07 20:17:51

【问题描述】：

我正在尝试创建一个自定义范围滑块。我无法以百分比（即 1 - 100）获取光标位置。

以下是相关代码：

var cursorPosition = e.clientX - startPoint.left - cursorRadius;
cursorPosition = clamp(cursorPosition, startPoint.left- cursorRadius, sliderDimention- cursorRadius*2);

function clamp(value, min, max) 
    return Math.min(Math.max(value, min), max);

我尝试了以下方法：

console.log((cursorPosition / sliderDimention) * 100);

它几乎可以正常工作。唯一的问题是，它是从 -2 - 95（四舍五入）。如何以百分比获取 sliderCursors 位置？

（请不要发布任何 JQuery 或其他“您可以使用 'this' 插件”的答案。我这样做是出于学习目的，我想创建自己的。谢谢！）

JSFiddle

function RangeSlider( /** DOM Elem */ parentElem) 
  var wrapperElem = document.getElementsByClassName('wrapperElem')[0],
    slider = document.getElementsByClassName('slider')[0],
    sliderCursor = document.getElementsByClassName('sliderCursor')[0];

  var sliderDimention = slider.offsetWidth,
    cursorRadius = sliderCursor.offsetHeight / 2,
    startPoint,
    currentTarget;


  function sliderDown(e) 
    e.preventDefault();

    currentTarget = null;
    var sliderWithDescendents = wrapperElem.querySelectorAll('*');
    for (var i = 0; i < sliderWithDescendents.length; i++) 
      sliderWithDescendents[i]
      if (sliderWithDescendents[i] === e.target || wrapperElem === e.target) 
        currentTarget = wrapperElem.children[0];
        break;
      
    
    if (currentTarget === null) return;

    startPoint = getOrigin(currentTarget);
    sliderDimention = slider.offsetWidth;

    window.addEventListener('mousemove', sliderMove);
    sliderMove(e);
  

  function sliderMove(e) 
    var cursorPosition = e.clientX - startPoint.left - cursorRadius;
    cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius, sliderDimention - cursorRadius * 2);
    console.log((cursorPosition / sliderDimention) * 100);
    sliderCursor.style.transform = 'translateX(' + (cursorPosition) + 'px)';
  

  function mouseUpEvents() 
    window.removeEventListener('mousemove', sliderMove);
  
  wrapperElem.addEventListener('mousedown', sliderDown);
  window.addEventListener('mouseup', mouseUpEvents);


var sliderTest = document.getElementById('sliderTest');
var test = new RangeSlider(sliderTest);






function clamp(value, min, max) 
  return Math.min(Math.max(value, min), max);



function getOrigin(elm) 
  var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : 
      top: 0,
      left: 0
    ,
    doc = elm && elm.ownerDocument,
    body = doc.body,
    win = doc.defaultView || doc.parentWindow || window,
    docElem = doc.documentElement || body.parentNode,
    clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
    clientLeft = docElem.clientLeft || body.clientLeft || 0;

  return 
    left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
    top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
  ;

.wrapperElem 
  height: 18px;
  width: 100%;
  cursor: pointer;
  display: flex;

.slider 
  height: 100%;
  width: calc(100% - 62px);
  border: 1px solid black;

.sliderCursor 
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid black;

<div class="wrapperElem">
  <div class="slider">
    <div class="sliderCursor"></div>
  </div>
</div>

【参考方案1】：

你忘了考虑几件事：

用于定义 cursorPosition 的 .slider 边框

从sliderDimention中减去.slider的边框和起始位置

cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius + 1, sliderDimention - 1 - cursorRadius*2);

console.log((cursorPosition / (sliderDimention - 2 - startPoint.left - cursorRadius)) * 100);

JSFiddle

【讨论】：

谢谢！有用！！如何分配职位（基于百分比）？比如说，我想为光标分配一个 40% 的值，数学是什么？我会不会：cursorPosition * sliderDimention？

@Jessica 只是：sliderCursor.style.transform = 'translateX(' + (sliderDimention * 0.4 - cursorRadius*2 - 2) + 'px)'; *** '-2' - .slider 左右边框的宽度