VPF::вышла шажа - Форум программистов

Fubu_By

Дата 24.9.2010, 22:32 (ссылка)

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

Загрузка ...

Опытный

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

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

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

Код



observe(img, 'mouseover', ol_display_ad);
observe(img, 'mouseout', ol_hide_ad);
observe(picad_div, 'mouseover', ol_display_ad);

    ol_display_ad = function ol_display_ad(e) {
        var el = getCurrentElement(e);
        display_ad(el);
    };

    ol_hide_ad = function (e) {
        var el = getCurrentElement(e);
        hide_ad(el);
    };

display_ad = function (el) {
        var d = get_picad_div(el);
        try {
            d.style.display = "block";
            
            d.style.left = el.offsetLeft.toString() + "px";
            d.style.top = el.offsetTop + el.offsetHeight - d.offsetHeight + "px";
            d.style.width = el.offsetWidth.toString() + "px";
            show_picad_div(d, 0, 0);
        } catch (e) {}
    };
    
    hide_ad = function (el) {
        var d = get_picad_div(el);
        hide_picad_div(d, 0, 0);
    };
show_picad_div = function (e, timeout, interval) {
        window.setTimeout(function () {
            var overlay_close = window.setInterval(function () {
                e.style.height = e.offsetHeight + 1 + 'px';
                e.style.top = e.offsetTop - 1 + 'px';
                
                if (e.offsetHeight >= 51) {
                    window.clearInterval(overlay_close);
                }
            }, interval);
        }, timeout);
    };


hide_picad_div = function (e, timeout, interval) {
        window.setTimeout(function () {
            var overlay_close = window.setInterval(function () {
                e.style.height = e.offsetHeight - 1 + 'px';
                e.style.top = e.offsetTop + 1 + 'px';
                
                if (e.offsetHeight == 0) {
                    window.clearInterval(overlay_close);
                }
            }, interval);
        }, timeout);
    };

но когда у меня переводишь с картинки на сообщение, оно всё равно уезжает, тормозит и потом просто хаус начинается... как сделать чтобы не перекрывали себя функционал hide и show? чтобы когда наводишь переводишь скартинки на сообщение оно оставалось на месте пока полностью не уберёш с них обоих курсор?

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

MobiAppSystems

Amphiluke

Дата 24.9.2010, 23:31 (ссылка)

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

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Насколько я понимаю, у вас при наведении указателя мыши на картинку сообщение всплывает не сразу, а с задержкой timeout. И то же самое — при уходе указателя с картинки. Правильно?
Если так, то когда указатель перемещается с картинки на сообщение, сначала по событию mouseout на картинке устанавливается таймер на сокрытие сообщения, а затем по событию mouseover на сообщении (т.е. на div'е) устанавливается таймер на функцию показа сообщения. Отсюда возможный хаос.
Короче, попробуйте перед установкой любых новых таймеров на показ/сокрытие сообщения очищать предыдущий установленный таймер (методом clearTimeout). Для этого придется сохранять результат, возвращаемый методом setTimeout, в переменную (так же, как вы делаете в случае setInterval).

Это сообщение отредактировал(а) Amphiluke - 24.9.2010, 23:32

Fubu_By

Дата 25.9.2010, 00:29 (ссылка)

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

Загрузка ...

Опытный

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

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

не помогло, да и там везде timeout=0

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

MobiAppSystems

Amphiluke

Дата 25.9.2010, 08:41 (ссылка)

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

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

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

Цитата(Fubu_By @ 25.9.2010, 04:29

)

да и там везде timeout=0

Вот это и может быть причиной проблем в некоторых браузерах.

Поскольку вы приводите лишь кусок кода, то приходится домысливать, как там у вас устроено все. smile

Вот результат этого «домысливания». Вроде работает. smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function observe(obj, ev, handler) {
    if (obj.addEventListener) {
        obj.addEventListener(ev, handler, false);
    } else {
        obj.attachEvent("on" + ev, handler);
    }
}
function getCurrentElement(e) {
    if (!e) e = event;
    return (e.target) ? e.target : e.srcElement;
}

t = 0;
window.onload = function() {
    var img = document.getElementById("img");
    var picad_div = get_picad_div();
    observe(img, 'mouseover', ol_display_ad);
    observe(img, 'mouseout', ol_hide_ad);
    observe(picad_div, 'mouseover', ol_display_ad);
    observe(picad_div, 'mouseout', ol_hide_ad);
}

function get_picad_div(el) {
    return document.getElementById("d");
}

ol_display_ad = function(e) {
    var el = getCurrentElement(e);
    display_ad(el);
};

ol_hide_ad = function (e) {
    var el = getCurrentElement(e);
    hide_ad(el);
};

display_ad = function (el) {
    var d = get_picad_div(el);
    d.style.display = "block";

    d.style.left = el.offsetLeft.toString() + "px";
    d.style.top = (el.offsetTop + el.offsetHeight - d.offsetHeight).toString() + "px";
    d.style.width = el.offsetWidth.toString() + "px";
    show_picad_div(d, 10, 10);
};
    
hide_ad = function (el) {
    var d = get_picad_div(el);
    hide_picad_div(d, 10, 10);
};
show_picad_div = function (e, timeout, interval) {
    if (t) clearTimeout(t);
    t = window.setTimeout(function () {
        t = 0;
     var overlay_close = window.setInterval(function () {
         e.style.height = (e.offsetHeight + 1).toString() + 'px';
            e.style.top = (e.offsetTop - 1).toString() + 'px';
    
         if (e.offsetHeight >= 51) {
             window.clearInterval(overlay_close);
            }
     }, interval);
    }, timeout);
};

hide_picad_div = function (e, timeout, interval) {
    if (t) clearTimeout(t);
    t = window.setTimeout(function () {
        t = 0;
        var overlay_close = window.setInterval(function () {
            e.style.height = Math.max(e.offsetHeight - 1, 0).toString() + 'px';
            e.style.top = (e.offsetTop + 1).toString() + 'px';
            
            if (e.offsetHeight < 2) {
                window.clearInterval(overlay_close);
                e.style.display = "none";
            }
        }, interval);
    }, timeout);
};
</script>
</head>

<body>
    <img src="jpg.jpg" alt="" id="img" height="51" />
    <div id="d" style="background: red; position: absolute; display: none;">ddddd</div>
</body>
</html>

Fubu_By

Дата 25.9.2010, 14:21 (ссылка)

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

Загрузка ...

Опытный

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

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

всё, спасибо. подтолкнул на правильную мысль )) надо было сделать ещё overlayInterval глобальной и добавить в каждый добавить

Код


if (overlayInterval) {
            window.clearInterval(overlayInterval);
        }

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

MobiAppSystems

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