Javascript.RU

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

Событие по массиву с координатами курсора мыши
Всем Привет! Подскажите пожалуйста в каком направлении двигаться. Ситуация в следующем:
Имеем координату Х курсора мыши:
var x1 = Math.round((e.pageX - $(this).offset().left)*10);

Имеется массив X-координат вертикальных линий:
var konf = new Array();
konf = (1500, 2400, 3300, 4200); // массив может быть любой длины.

Необходимо, чтобы при наведении курсора на линию, т.е. х1 будет равен одному из элементов массива konf, срабатывало условие (у меня смена фона страницы). Сделано следующее:
var x2 = jQuery.inArray(x1, konf);

на выходе имеем необходимую нам координату и делаем с ней все, что нам нужно. Все бы хорошо, но есть одно весомое НО. Переменная х1 изменяется, при разных масштабах экрана, с разным шагом, т.е. двигая мышь слева на право, мы получаем такие координаты мыши, например: ……, 1489, 1499, 1509, 1519, 1529, ….. В итоге поймать курсор на координате 1500 не представляется возможным не изменив масштаб страницы, собственно это происходит и с остальными линиями. Естественно пользователь делать этого не будет. Что делать?
Есть идея создать диапазон рядом с линией, в который при попадании курсора мыши и будет выполняться наше условие, к примеру, 20 слева и 20 справа. В итоге:
if (konf.length>0){
   var konf2 = new Array();
   var d = 20;
   for (var i=0, j=0; i<konf.length; i++, j=j+2){
      konf2[j]= Number(konf[i])-d;
      konf2[(j+1)]= Number(konf[i])+d;
   }; //конец цикла for 
};

получаем массив konf2(1480, 1520, 2380, 2420, 3280, 3320, 4180, 4220), т.е несколько диапазонов; 1480-1520, 2380-2420, 3280-3320, 4180-4220. Далее:
for (var i=0; i<konf2.length; i=i+2) {
   if ( x1 >= ( Number(konf2[i])) && x1 <=  (Number(konf[i+1]))  ){
      $('body').removeClass('body2');
      $('body').addClass('body');
   } else {
      $('body').removeClass('body');
      $('body').addClass('body2');
   };
};

Вот как-то так. Все вроде должно работать, но работает только последний диапазон 4180-4220 (линия с х-координатой 4200), остальные молчат. Т.е. цикл пробежался по ним, последнюю i запомнил и по ней две цифры выводит. Что делать? Кто виноват? Подскажите пожалуйста в каком направлении копать.

Последний раз редактировалось Kristo, 29.12.2014 в 22:22.
Ответить с цитированием
  #2 (permalink)  
Старый 29.12.2014, 23:10
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Сообщение от Kristo
Переменная х1 изменяется, при разных масштабах экрана, с разным шагом, т.е. двигая мышь слева на право, мы получаем такие координаты мыши, например: ……, 1489, 1499, 1509, 1519, 1529, ….. В итоге поймать курсор на координате 1500 не представляется возможным не изменив масштаб страницы, собственно это происходит и с остальными линиями. Естественно пользователь делать этого не будет. Что делать?
используй относительные размеры вместо абсолютных: 1/2, 1/4, 1/12 и т.п.
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #3 (permalink)  
Старый 29.12.2014, 23:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Kristo
чтобы при наведении курсора на линию
по mouseenter выдавать нужную информацию
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
"Защита от дурака" при многократном наведении курсора мыши на картинку Trish jQuery 4 13.02.2012 19:07
Событие "наведение курсора мыши на элемент" SilentChild Элементы интерфейса 1 05.10.2011 16:06
Смена картинок в зависимости от положения курсора мыши antonio_vrn Events/DOM/Window 3 31.05.2011 22:07
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Как имитировать событие мыши Andrey_V Общие вопросы Javascript 4 10.11.2008 16:39