Вход

Просмотр полной версии : Как реализовать движение двух блоков одновременно?


Bizon4ik
04.11.2013, 01:04
Доброе время суток.

Сразу скажу что я только начинаю изучать 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, 23:11
Решил за счет того что в меню с выезжающим текстом начал использовать 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);
}
}
}