var thumb = document.getElementById('thumb');
var bg = document.getElementById('bg');
var drag_status = false;
var count = 0;
var x;
thumb.onmousedown = function(e){
drag_status = true;
x = e.pageX - thumb.offsetLeft;
}
document.onmousemove = function(e){
if(!drag_status) return false;
thumb.style.left = e.pageX - x + 'px';
if(thumb.offsetLeft < 0) thumb.style.left = 0 + 'px';
if(thumb.offsetLeft > bg.offsetWidth - thumb.offsetWidth)thumb.style.left = bg.offsetWidth - thumb.offsetWidth + 'px';
count = thumb.offsetLeft;
document.getElementsByTagName('p')[0].innerHTML = count;
}
document.onmouseup = function(){
drag_status = false;
}
Зачем в 8 строке:
x = e.pageX - thumb.offsetLeft;
?
когда можно написать:
x = e.pageX;
Ведь нам важно координата х первого клика мыши по бегунку и дальнейшее изменение этой координаты. Вычисляем разницу координат первоначального клика и текущего положения курсора и результат устанавливаем в свойство left.
thumb.offsetLeft не играет никакой роли тут, на момент исполнения функции начинающейся в 6 строке thumb.offsetLeft равна нулю и далее х передается в следующую функцию и не меняется на всем протяжении выполнения этой функции. Или я что-то не правильно понял?