JavaScript [бегунок]
http://jsfiddle.net/xpfL5qun/
как добавить шаги теперь? что бы бегунок передвигался не по 1px а по 10 например |
accept,
вывод но не бегунок ... бегунок сами по тому же способу если нужно http://jsfiddle.net/xpfL5qun/6/ |
Цитата:
|
Цитата:
|
accept,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="lib.js"></script>
<style>
.slider {
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
width: 310px;
height: 15px;
margin: 5px;
}
.thumb {
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 0px;
top: -5px;
background: blue;
cursor: pointer;
}
span{
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 150px;
top: -5px;
background: blue;
cursor: pointer;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="thumb"></div>
<span>0</span>
</div>
<script>
function fixEvent(e) {
e = e || window.event;
if (!e.target) e.target = e.srcElement;
if (e.pageX == null && e.clientX != null ) { // если нет pageX..
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html.scrollLeft || body && body.scrollLeft || 0);
e.pageX -= html.clientLeft || 0;
e.pageY = e.clientY + (html.scrollTop || body && body.scrollTop || 0);
e.pageY -= html.clientTop || 0;
}
if (!e.which && e.button) {
e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
}
return e;
}
function getCoords(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
var sliderElem = document.getElementById('slider');
var thumbElem = sliderElem.children[0];
var span = sliderElem.children[1];
thumbElem.ondragstart = function() { return false; };
thumbElem.onmousedown = function(e) {
e = fixEvent(e);
var thumbCoords = getCoords(thumbElem);
var shiftX = e.pageX - thumbCoords.left;
var shiftY = e.pageY - thumbCoords.top;
var sliderCoords = getCoords(sliderElem);
document.onmousemove = function(e) {
e = fixEvent(e);
// вычесть координату родителя, т.к. position: relative
var newLeft = e.pageX - shiftX - sliderCoords.left;
// курсор ушёл вне слайдера
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = sliderElem.offsetWidth - thumbElem.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
newLeft = Math.round(newLeft/30)*30;
span.innerHTML = newLeft/3;
thumbElem.style.left = newLeft + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
return false; // disable selection start (cursor change)
};
</script>
</body>
</html>
|
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 равна нулю и далее х передается в следующую функцию и не меняется на всем протяжении выполнения этой функции. Или я что-то не правильно понял? |
Сам спросил, сам отвечу.
x = e.pageX - thumb.offsetLeft;- эта строка нужна для того чтобы корректно воспользоваться бегунком второй и последующие разы. Если убрать правую часть, то отсчет координат начнется с нуля, а не с того места где был расположен бегунок после последнего передвижения. |
Чтобы ползунок двигался шагами его нужно сдвигать на вычисляемый шаг. Очевидно же http://jsfiddle.net/xpfL5qun/8/
document.onmousemove = function(e){
if (!drag_status) return false;
var left = e.pageX - x;
if (left < 0)
left = 0;
if (left > bg.offsetWidth - thumb.offsetWidth)
left = bg.offsetWidth - thumb.offsetWidth;
count = Math.round(left / 10) * 10;
thumb.style.left = count + 'px';
document.getElementsByTagName('p')[0].innerHTML = count;
}
|
| Часовой пояс GMT +3, время: 08:25. |