Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2014, 18:51
Аспирант
Отправить личное сообщение для accept Посмотреть профиль Найти все сообщения от accept
 
Регистрация: 19.06.2014
Сообщений: 34

JavaScript [бегунок]
http://jsfiddle.net/xpfL5qun/

как добавить шаги теперь? что бы бегунок передвигался не по 1px а по 10 например
Ответить с цитированием
  #2 (permalink)  
Старый 11.12.2014, 19:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

accept,
вывод но не бегунок ... бегунок сами по тому же способу если нужно
http://jsfiddle.net/xpfL5qun/6/
Ответить с цитированием
  #3 (permalink)  
Старый 11.12.2014, 19:59
Аспирант
Отправить личное сообщение для accept Посмотреть профиль Найти все сообщения от accept
 
Регистрация: 19.06.2014
Сообщений: 34

Сообщение от рони Посмотреть сообщение
вывод но не бегунок ... бегунок сами по тому же способу если нужно
http://jsfiddle.net/xpfL5qun/6/
да не тааак, мне нужно, чтобы сам бегунок шагами ходил
Ответить с цитированием
  #4 (permalink)  
Старый 11.12.2014, 20:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от accept
да не тааак, мне нужно, чтобы сам бегунок шагами ходил
я показал как это сделать ))) вычисляйте left - делайте его кратным 10 и только тогда устанавливайте в стиль
Ответить с цитированием
  #5 (permalink)  
Старый 11.12.2014, 20:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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>
Ответить с цитированием
  #6 (permalink)  
Старый 15.12.2014, 22:46
Интересующийся
Отправить личное сообщение для leshiple Посмотреть профиль Найти все сообщения от leshiple
 
Регистрация: 09.12.2014
Сообщений: 21

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 равна нулю и далее х передается в следующую функцию и не меняется на всем протяжении выполнения этой функции. Или я что-то не правильно понял?
Ответить с цитированием
  #7 (permalink)  
Старый 16.12.2014, 21:08
Интересующийся
Отправить личное сообщение для leshiple Посмотреть профиль Найти все сообщения от leshiple
 
Регистрация: 09.12.2014
Сообщений: 21

Сам спросил, сам отвечу.
x = e.pageX - thumb.offsetLeft;
- эта строка нужна для того чтобы корректно воспользоваться бегунком второй и последующие разы. Если убрать правую часть, то отсчет координат начнется с нуля, а не с того места где был расположен бегунок после последнего передвижения.
Ответить с цитированием
  #8 (permalink)  
Старый 17.12.2014, 19:49
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Чтобы ползунок двигался шагами его нужно сдвигать на вычисляемый шаг. Очевидно же 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;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Книга: JavaScript. Сильные стороны Magneto Учебные материалы 16 21.04.2013 15:28
Интерпретатор Java на JS kobezzza Оффтопик 24 11.10.2012 18:32
Первый Moscow JavaScript Meetup korenyushkin Общие вопросы Javascript 0 26.07.2011 15:23
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34