Javascript.RU

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

Как реализовать движение двух блоков одновременно?
Доброе время суток.

Сразу скажу что я только начинаю изучать JavaScript и с библиотеками типа JQuery еще не знаком. Поэтому по возможности подскажите решения на чистом JavaScript.

Предисловие: пытаюсь повторить дизайн одного сайта, и вот что у меня пока получилось http://bizon4iktest.zz.mu Если вы наведите на рисунок с кубками и цифрой 2011, то выедет блок, если снимите с него указатель мыши то блок заедет. Что бы так сделать я додумался только до следующего кода

В HTML в движущемся диве
onmouseover="moveLongText();" onmouseout="moveBackLongText()"

И в JS
function moveLongText() {
	clearInterval(cleaner);
	cleaner=setInterval(moveLT, 2);
}

function moveBackLongText() {
	clearInterval(cleaner);
	cleaner=setInterval(moveBLT, 2, 8);
}

function moveLT() {
  marginLT=marginLT-8;
  if (marginLT >= 118) {
	text1.style.marginLeft = marginLT+'px';
  } else {clearInterval(cleaner);}
}

function moveBLT(interval) {
  marginLT=marginLT+interval;
  if (marginLT <= 549) {
	text1.style.marginLeft = marginLT+'px';
  } else {clearInterval(cleaner);}
}


Точно по такому же принципу у меня реализован и слайдер.

Суть проблемы: Если с рисунка на котором выезжает блок быстро перевести курсор на левую стрелку слайдера, то выезжающий блок замирает на пол пути. Это происходит потому что при заходе на стрелку слайдера я очищаю интервал дабы запустить его для слайдера.
Подскажите плз, как сделать что бы выезжающий див не замерал на пол пути?

Последний раз редактировалось Bizon4ik, 04.11.2013 в 01:07.
Ответить с цитированием
  #2 (permalink)  
Старый 04.11.2013, 23:11
Интересующийся
Отправить личное сообщение для Bizon4ik Посмотреть профиль Найти все сообщения от Bizon4ik
 
Регистрация: 04.11.2013
Сообщений: 15

Решил за счет того что в меню с выезжающим текстом начал использовать setTimeout

action = 0;
document.getElementById('js-collection1-text1').onmouseover = function moveLongText() {action = 1; moveLT();}
document.getElementById('js-collection1-text1').onmouseout  = function moveBackLongText() {action = 0; moveLT();}

function moveLT() {
   if (action==1) {
    if (marginLT >= 118) {
		marginLT=marginLT-8;
		text1.style.marginLeft = marginLT+'px';
		setTimeout(moveLT, 1);
	 }
   } else {
      if (marginLT <= 549) {
		marginLT=marginLT+8;
		text1.style.marginLeft = marginLT+'px';		
		setTimeout(moveLT, 1);
	   }
     }   
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
как реализовать связные списки? br1an jQuery 0 27.06.2013 06:11
Как реализовать задержку mxs89 Общие вопросы Javascript 3 04.06.2013 14:22
Как реализовать? Fliand Элементы интерфейса 4 22.08.2009 19:47
Динамически увеличивающиеся изображения: как реализовать? cforest Events/DOM/Window 6 24.06.2009 17:16