获取光标位置(以百分比表示)
Get cursors position in percentage
我正在尝试创建自定义范围滑块。我无法以百分比(即 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(四舍五入)。如何获取滑块光标位置(以百分比表示)?
(请不要发布任何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>
你忘了考虑几件事:
- 用于定义光标位置的 .slider 边框
-
从滑块中减去 .slider 的边框和起始位置Dimention
cursorPosition = clamp(cursorPosition, startPoint.left - cursorRadius + 1, sliderDimention - 1 - cursorRadius*2); console.log((cursorPosition / (sliderDimention - 2 - startPoint.left - cursorRadius)) * 100);
JSFiddle
相关文章:
- React中的数据集表示
- 如果宽度是百分比,如何设置以px为单位的图像高度
- 使用javascript可以设置css动画的当前百分比
- 任何将(SSH)终端嵌入到一些HTML5表示系统中的想法(例如,show.js)
- 文本表示法VS.构造函数,用于在JavaScript中创建对象
- 如何将Date字段设置为等于另一个Date+Int值,该值表示月份值
- regex表示逗号,后跟空格或仅逗号
- 我将如何将其更改为循环和数组表示法
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- Javascript差异百分比数学
- 如何使用Undercore和Backbone在HTML中表示模型属性
- 如何从二进制int中获取百分比,每个位表示x%
- extJs(设置高度和宽度)(以百分比表示)
- JQuery更改以百分比问题表示的宽度
- 如何使用jquery获取以百分比表示的行高
- 将圆内的点位置表示为任意线段的百分比
- 把数字表示成百分比
- 用D3将数字快速表示为百分比
- 调整高度&宽度以百分比而非像素表示
- 获取光标位置(以百分比表示)