Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.05.2009, 17:45
Новичок на форуме
Отправить личное сообщение для Viktor ------- Посмотреть профиль Найти все сообщения от Viktor -------
 
Регистрация: 04.05.2009
Сообщений: 5

Динамическое изменение размеров блока при наведении мыши!
Всем доброго времени суток!
задача вроде бы проста, при наведении на кноку(ячейку), динамически изменяется размер "div"-a., после "mouseout" возврат к исходным размерам (и то, и другое плавно!)
В нижеследующем примере кода возникает такой эффект:
при первом наведении мыши на объект, ничего не происходит, второй и все последующие разы работает так, как должно быть.
(аналогично для всех кнопок.)
Подскажите плиз что я делал "не так".

В .js
=================================

function chsz (xobj, id, w, h, speed) {
var t1, t2;
var obj=(MSIE)? document.all(id) : document.getElementById(id);
var n=Number(obj.offsetWidth), m=Number(obj.offsetHeight);
var x=Number(obj.offsetWidth), y=Number(obj.offsetHeight);
xobj.onmouseover=function (){
clearTimeout(t2);
if (n < w) {n+=5; obj.style.width=n};
if (m < h) {m+=5; obj.style.height=m};
t1 = setTimeout(arguments.callee, speed);
if (n >= w && m >= h) {clearTimeout(t1)};
};
xobj.onmouseout=function (){
clearTimeout(t1);
if (n > x) {n-=5; obj.style.width=n};
if (m > y) {m-=5; obj.style.height=m};
t2 = setTimeout(arguments.callee, speed);
if (n <= x && m <= y) {clearTimeout(t2)};
};
return;
}

=================================

вызов:
=================================
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','1') ">..........</td>
=================================
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2009, 19:55
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

Цитата:
Подскажите плиз что я делал "не так".
При первом mouseover навешивается событие onmouseover, но не вызывается.
function chsz(xobj, id, w, h, speed){
    var t1, t2;
    var obj=document.getElementById(id);
    var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);

    t1 = setInterval(function(){
        if(n<w){
            n+=5;
            obj.style.width=n+'px'
        }
        if(m<h){
            m+=5;
            obj.style.height=m+'px'
        }
        if(n>=w&&m>=h){
            clearInterval(t1)
        }
    }, speed);
    xobj.onmouseover=function(){
        clearInterval(t2);
        t1 = setInterval(function(){
            if(n<w){
                n+=5;
                obj.style.width=n+'px'
            }
            if(m<h){
                m+=5;
                obj.style.height=m+'px'
            }
            if(n>=w&&m>=h) clearInterval(t1)
        }, speed);
    };
    xobj.onmouseout=function (){
        clearInterval(t1);
        t2 = setInterval(function(){
            if(n>x){
                n-=5;
                obj.style.width=n+'px'
            }
            if(m>y){
                m-=5;
                obj.style.height=m+'px'
            }
            if(n<=x&&m<=y) clearInterval(t2)
        }, speed);
    };
    return
}
Ответить с цитированием
  #3 (permalink)  
Старый 05.05.2009, 11:45
Новичок на форуме
Отправить личное сообщение для Viktor ------- Посмотреть профиль Найти все сообщения от Viktor -------
 
Регистрация: 04.05.2009
Сообщений: 5

Re: e1f (динамическое изменение размеров блока)
Thanks!
было такое предчувствие....
Кстати, а можно ли програмно вызвать такое событие (mouseover).
На нескольких форумах нашёл что-то типа "obj.onMouseover()",
но пока это не работает...
Да, и ещё с вышеприведенным кодом остается такая ерунда:
при первом наведении мыши на новый объект, блок ведет себя не предсказуемо...
т.е. когда я первый раз навожу на первую кнопку, затем быстро перевожу курсор мыши на вторую кнопку, блок продолжает уменьшать свой размер. даже когда курсор перемещается над этой кнопкой блок никак не реагирует, либо разворачивается и сворачивается по 2 раза...
после того как навожу курсор на эту кнопку второй и все последующие раз - все работеат идеально!!!
Никак не могу въехать, что там происходит не так...
Как я понимаю, после первого запуска функции объект остается жить дальше и при последующих запусках отлично срабатывает xobj.onmouseover, но почему возникают такие глюки при первом запуске не въезжаю...
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2009, 12:32
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

function chsz(xobj, id, w, h, speed){
    var t1, t2;
    var obj=document.getElementById(id);
    var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);
 
    xobj.onmouseover=function(){
        clearInterval(t2);
        t1 = setInterval(function(){
            if(n<w){
                n+=5;
                obj.style.width=n+'px'
            }
            if(m<h){
                m+=5;
                obj.style.height=m+'px'
            }
            if(n>=w&&m>=h) clearInterval(t1)
        }, speed);
    };
    xobj.onmouseover();
    xobj.onmouseout=function (){
        clearInterval(t1);
        t2 = setInterval(function(){
            if(n>x){
                n-=5;
                obj.style.width=n+'px'
            }
            if(m>y){
                m-=5;
                obj.style.height=m+'px'
            }
            if(n<=x&&m<=y) clearInterval(t2)
        }, speed);
    };
    return
}

А так сработает?
P.S. .onMouseover и .onmouseover -- разные методы
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2009, 13:01
Новичок на форуме
Отправить личное сообщение для Viktor ------- Посмотреть профиль Найти все сообщения от Viktor -------
 
Регистрация: 04.05.2009
Сообщений: 5

Не-а...
Эксплорер: "bufer overflow";
лиса тихо умерла (- не работает ничего!)
под остальными не пробовал.
Ответить с цитированием
  #6 (permalink)  
Старый 05.05.2009, 13:17
Аватар для e1f
e1f e1f вне форума
Профессор
Отправить личное сообщение для e1f Посмотреть профиль Найти все сообщения от e1f
 
Регистрация: 03.04.2009
Сообщений: 1,263

В Лисе работает. На таком наборе:
<script type="text/javascript">
<!--
function chsz(xobj, id, w, h, speed){
    var t1, t2;
    var obj=document.getElementById(id);
    var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);

    t1 = setInterval(function(){
        if(n<w){
            n+=5;
            obj.style.width=n+'px'
        }
        if(m<h){
            m+=5;
            obj.style.height=m+'px'
        }
        if(n>=w&&m>=h){
            clearInterval(t1)
        }
    }, speed);
    xobj.onmouseover=function(){
        clearInterval(t2);
        t2=null;
        if (!t1) t1 = setInterval(function(){
            if(n<w){
                n+=5;
                obj.style.width=n+'px'
            }
            if(m<h){
                m+=5;
                obj.style.height=m+'px'
            }
            if(n>=w&&m>=h) clearInterval(t1)
        }, speed);
    };
    xobj.onmouseout=function (){
        clearInterval(t1);
        t1=null;
        if (!t2) t2=setInterval(function(){
            if(n>x){
                n-=5;
                obj.style.width=n+'px'
            }
            if(m>y){
                m-=5;
                obj.style.height=m+'px'
            }
            if(n<=x&&m<=y) clearInterval(t2)
        }, speed);
    };
    return
}
-->
</script>
</head>
<body>
<table><tr>
<td id="libcell" style="border:1px solid red" onmouseover="chsz(this,'descrlib','100','100','1') ">..........</td></tr></table>
<div id="descrlib" style="width:10px;height:10px;border:1px solid green"></div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 05.05.2009, 14:06
Новичок на форуме
Отправить личное сообщение для Viktor ------- Посмотреть профиль Найти все сообщения от Viktor -------
 
Регистрация: 04.05.2009
Сообщений: 5

да, но глюки остались, попробуйте код ниже.
Если после загрузки страницы быстро переводить курсор с кнопки на кнопку, то глюки хорошо видны, после нескольких наведений на объект - работает нормально.
Кстати я у себя изменил на "var x=0, y=0;" так лучше работает, т.к. при наведении на новый объект он запоминает текущие размеры блока и
если тот еще не успел вернутся к исходному, - получится не красиво )

================================================== ==

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<Head>
<style>
.libtable{
border: thin solid black;
width-max: 600;
border: 1px solid #fff;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
text-align: center;
margin: 0 auto;
padding: 0;
border-spacing: 0;
border-spacing: 30px;
}
#libcell {
color: #999;
font-weight: bold;
border: 1px solid #eee;
background-color: #fbfefe;
width: 100px;
height: 100px;
}
#libcell:hover {
color: #000;
font-weight: bold;
border: thin solid #eee;
background-color: #f6fafa;
}
</style>
<script type="text/javascript">
<!--
function chsz(xobj, id, w, h, speed){
var t1, t2;
var obj=document.getElementById(id);
var n=x=Number(obj.offsetWidth), m=y=Number(obj.offsetHeight);

t1 = setInterval(function(){
if(n<w){
n+=5;
obj.style.width=n+'px'
}
if(m<h){
m+=5;
obj.style.height=m+'px'
}
if(n>=w&&m>=h){
clearInterval(t1)
}
}, speed);
xobj.onmouseover=function(){
clearInterval(t2);
t2=null;
if (!t1) t1 = setInterval(function(){
if(n<w){
n+=5;
obj.style.width=n+'px'
}
if(m<h){
m+=5;
obj.style.height=m+'px'
}
if(n>=w&&m>=h) clearInterval(t1)
}, speed);
};
xobj.onmouseout=function (){
clearInterval(t1);
t1=null;
if (!t2) t2=setInterval(function(){
if(n>x){
n-=5;
obj.style.width=n+'px'
}
if(m>y){
m-=5;
obj.style.height=m+'px'
}
if(n<=x&&m<=y) clearInterval(t2)
}, speed);
};
return
}
-->
</script>
</head>
<body>
<table class="libtable" align="center" border="1">
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Books</td>
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Articles</td>
</tr>
<tr>
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Software</td>
<td id="libcell" onMouseover="chsz(this,'descrlib','200','100','2') ">Wallpapers</td>
</table>
<div id="descrlib" style="width:10px;height:10px;border:1px solid green"><span></span></div>
</body>
</html>

================================================== ==
Ответить с цитированием
  #8 (permalink)  
Старый 05.05.2009, 18:13
Новичок на форуме
Отправить личное сообщение для Viktor ------- Посмотреть профиль Найти все сообщения от Viktor -------
 
Регистрация: 04.05.2009
Сообщений: 5

Динамическое изменение размера div-a при наведении на кнопку!
Решил таким способом: (см. вложенный файл)
теперь всё работает идеально!

P.S.
Тестилось на FF и IE7...

Спасибо e1f за помощь и участие!!!!!
Вложения:
Тип файла: txt 1.txt (1.1 Кб, 78 просмотров)
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 19:48
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 16:17
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 12:43
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 20:54
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 15:55