VPF::изменение ширины div-a по событию onMouseover

Enya

Дата 7.2.2008, 23:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

У нас есть div высота 100% ширина 1-2рх, при попадании курсора мыши на эту полоску. Ширина увеличивается стремительно до 25рх, соотвественно когда курсор уходит - то так же стремительно причется в 1-2рх шириной полоску.

Много всякой инфы по событиям связанными с элементами формы, а вот по таким мелким анимационным не очень. Буду благодарна (+) за помощь.

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

ksnk

Дата 8.2.2008, 00:38 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Enya, Чудес, как правило, не бывает. Видимо скрипт чего-то хочет от этой полоски, или в CSS про нее чего-нибудь такое написано. Откройте страничку в FireFox с установленным FireBug и сделайте Inspect Element. Возможно, что-нибудь прояснится...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Ghirik

Дата 8.2.2008, 00:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

ksnk, Вы наверное экстрасенс smile

Я пять раз прочитал текст сообщения, посмотрел на название темы.... Но не смог понять чего надо. smile

Если у Enya, есть такой скрипт, то, показывать, как такое сделать, вроде не нужно. А что тогда нужно?

--------------------

Отдадим всё клиенту, пускай его машина мучается...

KuZyagroup

Дата 8.2.2008, 05:04 (ссылка)

(нет голосов)

Загрузка ...

magento solution

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 16.4.2007
Где: Kiev

Репутация: 1
Всего: 4

2Ghirik - коходу ksnk вообще не экстра сэнс. Он ответил явно не на вопрос Enya.
2Enya Сейчас накидаю план, когда освобожусь напишу пример.
1. ловим onMouseOver и передаем в myJS() наш див(или ловим его в функции по id)
2. зaпускаем c задержкой по setTimeout myJS если надо
Что делает сама JS. Она узнает текущий размер div-a и если надо увеличиваетпо сеттаймаут

примерный код

Код


function myJS() {
 divlength = GetElementById(...).style.width;
 if (divlength<25) {
     divlength += (25-divlength)*2+1;
     if (divlength < 25 )  diclength = 25;
     setTimeout('myJS()',200); // Ключивой момент
 }
}

Добавлено через 13 минут и 56 секунд
по ходу выполнения кода советую выкурить первых две темы факъю данного подфорума
http://forum.vingrad.ru/faq/topic-148995.html
http://forum.vingrad.ru/faq/topic-185836/k...settimeout.html

Enya

Дата 8.2.2008, 09:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>div JS</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script language="Javascript" type="text/javascript">
<!--
    function myJS() {
        divlength = GetElementById(my).style.width;
             if (divlength<25) {
                 divlength += (25-divlength)*2+1;
                 if (divlength < 25 )  diclength = 25;
                 setTimeout('myJS()',200); // Ключивой момент
             }
    }
-->
</script>
</head>
<body>
<div id="my" onmouseover="myJS()"></div>
</body>
</html>

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

SelenIT

Дата 8.2.2008, 09:58 (ссылка)

(голосов:1)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

"Коходу" первым "экстрасенсом", догадавшимся, что нужна анимация по событию, оказался KuZyagroup. Я, стало быть, вторым smile

Но вот пример кода, увы, явно безграмотный. А вот рабочий вариант:

Код


<script type="text/javascript">
function anim() {
   if (anim.timer) clearTimeout(anim.timer); // сброс прошлой анимации при смене направления
   if ((anim.obj.offsetWidth < anim.max && anim.dir > 0) || (anim.obj.offsetWidth > anim.min && anim.dir < 0)) {
      anim.obj.style.width = anim.obj.offsetWidth + anim.step*anim.dir + 'px';
      anim.timer = window.setTimeout(anim, anim.duraition/anim.step);
   }
}
anim.min = 5;          // минимальный размер, px
anim.max = 25;         // максимальный -"-
anim.duraition = 200;  // длительность анимации, мс
anim.step = 5;         // шаг анимации, px
</script>
<style>
#dd { width: 5px; height: 100%; background: #a88; }
</style>
<div id="dd" onmouseover="anim.obj=this;anim.dir=1;anim();" onmouseout="anim.obj=this;anim.dir=-1;anim();"></div>

Тут все параметры анимации, а также анимируемый объект и направление анимации (сворачивать или разворачивать) хранятся в статических переменных ф-ции (чтоб не заморачиваться с привязкой this), и нет неявного eval в таймауте...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ksnk

Дата 8.2.2008, 11:43 (ссылка)

(голосов:2)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Ну да, в цирке мне, видимо, выступать пока рано. ;-)
Если изменить первые строчки функции SelenIT'а вот так

Код


function anim(e,d) {
   if((d==1)||(d==-1)){anim.obj=e;anim.dir=d} // проверка на корректность в НУЖНА!
...

, то можно будет писать в html немного поменьше:

Код


<div id="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

KuZyagroup

Дата 8.2.2008, 13:40 (ссылка)

(нет голосов)

Загрузка ...

magento solution

Профиль
Группа: Участник
Сообщений: 283
Регистрация: 16.4.2007
Где: Kiev

Репутация: 1
Всего: 4

2SelenIT согласен написано криво, но я жн подчеркнул что это не код а направление в котором нужно писать.
П.С. 2Enya Вы хоть разобрались, а то в вашем посте( копи пастлом сделаный) JS с ошибками

Добавлено через 4 минуты и 44 секунды
2ksnk - this +setTimeout это опасная возможность словить грабли

bars80080

Дата 8.2.2008, 13:56 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

SelenIT, конкретно по вашему коду,
для одиночной панельки подходит на ура, а если вопрос стоит в нескольких
скажем я их просто разместил друг за другом, наводим мышь на одну, затем сразу на следующую и т.д., они разворачиваются, но обратно сворачиваться не хотят

в меру своего разумения js, я так полагаю, там просто объект один и ему присваиваются каждый новые параметры, в т.ч. указатель на див, а вот как сделать чтобы всё равно сворачивалось?

SelenIT

Дата 8.2.2008, 14:03 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

KuZyagroup, в том-то и фокус предложения ksnkа, что this передается только один раз, до возникновения граблей smile

Грабли тут, по-моему, могут быть в другом месте - в Gecko (из-за нестандартного параметра-задержки), и то лишь если поменять аргументы местами...

bars80080, абсолютно верное замечание. Об универсальности я действительно особо не задумывался. Первая мысль - завести хеш анимируемых элементов и передавать их id (а заодно и анимировать все разом, по одному таймеру - меньше вычислений), но не исключаю, что есть решение и лучше...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

ksnk

Дата 8.2.2008, 17:34 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

SelenIT, Можно обойтись одной функцией как сейчас. Нужно только заменить setTimeout на setInterval и переписать чуть-чуть работу с ним. Ну и сбрасывать "предыдущую" анимацию в начальное состояние anim.obj.width=''.
Вот. Двигается немного глючно - зато спортивно - все в одной функции smile

Код


<body>
<script type="text/javascript">
function anim(e,d) {
    if (anim.obj && e!=anim.obj){
        anim.obj.style.width='';
    }
    if (anim.timer) clearInterval(anim.timer); // сброс прошлой анимации при смене направления
    anim.obj=e; anim.dir=d;
    anim.timer=setInterval(function(){
        if ((anim.obj.offsetWidth < anim.max && anim.dir > 0)
            || (anim.obj.offsetWidth > anim.min && anim.dir < 0)) 
        {
            anim.obj.style.width = anim.obj.offsetWidth + anim.step*anim.dir + 'px';
        } else {
            clearInterval(anim.Timer);  anim.Timer=null;
        }
    },anim.duraition/anim.step);
}
anim.min = 5;          // минимальный размер, px
anim.max = 25;         // максимальный -"-
anim.duraition = 200;  // длительность анимации, мс
anim.step = 5;         // шаг анимации, px
</script>
<style>
.dd, .ddd { float:left; width: 5px; height: 100%; }
.dd { background: #a88; }
</style>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
<div class="ddd" ></div>
<div class="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
</body>

Это сообщение отредактировал(а) ksnk - 8.2.2008, 17:37

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

SelenIT

Дата 9.2.2008, 05:33 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401

Для полноты картины я все-таки довел до реализации свою идею с хешем (точнее, двумя, как оказалось;) внутри ф-ции:

Код


<script type="text/javascript">
function anim(id,dir) {
   // ставим таймер "впрок", чтобы не терять время на вычисления (для плавности)
   anim.timer = window.setTimeout(anim, anim.duraition*anim.step/(anim.max - anim.min));
   // если первый раз - инициализируем хеши объектов и направлений анимации
   if (!anim.obj) {
      anim.obj = {};
      anim.dir = {};
   }
   // обновляем хеши по текущей ситуации (новому событию)
   if ((dir == 1) || (dir == -1)) {
      anim.dir[id]=dir;
      if (!anim.obj[id]) anim.obj[id]=document.getElementById(id);
   }
   // флаг активности анимации (хотя бы одной)
   var playing = false;
   // идем по хешу, анимируем те объекты, для которых это актуально
   for (var i in anim.obj) {
      if ((anim.obj[i].offsetWidth < anim.max && anim.dir[i] > 0) ||
          (anim.obj[i].offsetWidth > anim.min && anim.dir[i] < 0)) {
         anim.obj[i].style.width = anim.obj[i].offsetWidth + anim.step*anim.dir[i] + 'px';
         // и устанавливаем флаг, что анимация активна
         playing = true;
      }
   }
   // если все анимации закончились - сбрасываем таймер
   if (!playing) window.clearTimeout(anim.timer);
}
anim.min = 10;         // минимальный размер, px
anim.max = 45;         // максимальный -"-
anim.duraition = 600;  // длительность анимации, мс
anim.step = 5;         // шаг анимации, px

</script>
<style>
div { width: 10px; height: 20%; margin: 2px; background: #8a8; }
</style>
<div id="dd0" onmouseover="anim('dd0',1)" onmouseout="anim('dd0',-1)"></div>
<div id="dd1" onmouseover="anim('dd1',1)" onmouseout="anim('dd1',-1)"></div>
<div id="dd2" onmouseover="anim('dd2',1)" onmouseout="anim('dd2',-1)"></div>
<div id="dd3" onmouseover="anim('dd3',1)" onmouseout="anim('dd3',-1)"></div>

Заодно исправил идиотскую арифметическую ошибку с расчетом задержки для таймаута (стр. 6 в моем прошлом коде - должно быть как в стр. 4 в новом)... И чуть увеличил величину и время "выезда" табов - для наглядности.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Ghirik

Дата 9.2.2008, 07:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Ох и упрямы Вы человек,SelenIT!
Класная реализация! Я как раз собирался подобную штуковину делать, а тут так красиво решено....
Спасибо.

P.S. только что то в FF не видно дивы, может я не так собрал страницу....

Ага, стили не правильно прикрутил... Все, работает в FF.

Это сообщение отредактировал(а) Ghirik - 9.2.2008, 07:30

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Enya

Дата 9.2.2008, 14:23 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 386
Регистрация: 5.10.2005

Репутация: нет
Всего: нет

А если полоску Div расположить по центру. то в какую сторону будет увеличиваться ширина?

Добавлено через 5 минут и 37 секунд
Я использовала вот этот код.

Код


BODY{
    margin: 0px;
    padding: 0px;
}
#dd {
    width: 1px;
    height: 100%;
    background: #a88;
    position: absolute;
    left: 60%;
}

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>div JS</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
function anim(e,d) {
   if((d==1)||(d==-1)){anim.obj=e;anim.dir=d} // сброс прошлой анимации при смене направления
   if ((anim.obj.offsetWidth < anim.max && anim.dir > 0) || (anim.obj.offsetWidth > anim.min && anim.dir < 0)) {
      anim.obj.style.width = anim.obj.offsetWidth + anim.step*anim.dir + 'px';
      anim.timer = window.setTimeout(anim, anim.duraition/anim.step);
   }
}
anim.min = 1;          // минимальный размер, px
anim.max = 45;         // максимальный -"-
anim.duraition = 200;  // длительность анимации, мс
anim.step = 5;         // шаг анимации, px
</script>
</head>
<body>
    <div id="dd" onmouseover="anim(this,1)" onmouseout="anim(this,-1)"></div>
</body>
</html>

А почему увеличивается в право? а если в лево? можно? smile

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

AKS

Дата 9.2.2008, 18:02 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Цитата(Enya @ 9.2.2008, 14:23

)

А почему увеличивается в право? а если в лево? можно?

Можно хоть вправо, хоть влево, хоть в обе стороны. Для этого достаточно знать принципы позиционирования элементов. Тогда и js-код менять не понадобится. Вот простой пример (для "раздвижения" в обе стороны):
css:

Код


#dd {
    text-align:center;
}
#dd div {
    width:10px;
    height:10%;
    background:#a88;
    margin:0 auto;
}

html:

Код


<div id='dd'>
    <div onmouseover="anim(this,1)" onmouseout="anim(this,-1)">X</div>
</div>

Цитата(SelenIT @ 9.2.2008, 05:33

)

Для полноты картины я все-таки довел до реализации свою идею с хешем (точнее, двумя, как оказалось;) внутри ф-ции

Не "лежит" у Вас душа к closures. ;) А ведь тогда можно было обойтись без обращения к глобальным данным (статическим св-вам функции). Как мне кажется, это бы позволило сделать решение более производительным.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »