VPF::Глюк с прозрачностью в Firefox'e - Форум программистов

Roy

Дата 10.7.2007, 18:38 (ссылка)

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

Загрузка ...

Новичок

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

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

Есть два слоя

Код


<div id="a1" style=\'position: absolute; top: 310px; left: 100px\'>
    <img name="mainpic1" src="img/collections/'.$gallery_pic.'">
</div>
<div id="a2" style=\'position: absolute; top: 310px; left: 100px; filter: alpha(opacity=0); opacity:0;MozOpacity:0;\'>
    <img name="mainpic2" src="img/collections/'.$gallery_pic.'">
</div>

и ссылка

Код


<a id="btn" href="javascript:doPic(\''.'img/collections/'.$tmp.'\');"><img id="newpic" src="'.'img/collections/'.$tmp.'" height="65" width="75"></a>

которая подставляет в один из слоев новую картинку и запускает скрипт плавного перехода от одно картинки к другой. Красотухис в том, что у слоя со старой картинкой прозрачность переходит от 100 к 0 % а слоя с новой наоборот: от 0 к 100%. В Oper'r, IE6, IE7 все работает - а в Firefox'e сначала мигает новая картинка (перекрывая старую) - а потом все как-то нормализуется. Но резкое появление картинки, у которой прозрачность должна быть нулевая портит весь красотухис :(

Коды скриптов:

Код


function setOpacity(obj, opacity) {
//    opacity = (opacity == 100)?99.999:opacity;
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}

var m = new Array(0,100);
var t = new Array();
function next() {
m[2]+=4;
m[1]-=4;
setOpacity(document.getElementById("a2"), m[2]);
setOpacity(document.getElementById("a1"), m[1]);
t[0] = setTimeout("next()",1);
if (m[2]>99) clearTimeout(t[0]);
}

function doPic(imgName) {
setOpacity(document.getElementById("a2"), 0);
setOpacity(document.getElementById("a1"), 100);
document.mainpic1.src = document.mainpic2.src;
    m[2]=0;
    m[1]=100;
imgOn = ("" + imgName);
document.mainpic2.src = imgOn;
next();
}

Уже долгое время пытаюсь разобраться, почему с Firefox'ом ткие проблемы...
Если кто подскажет путь решения проблемы, буду очень прищнателен smile

Это сообщение отредактировал(а) Roy - 10.7.2007, 18:55

SelenIT

Дата 11.7.2007, 01:08 (ссылка)

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

Загрузка ...

баг форума

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

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

Roy, зачем вторую строчку в скрипте закомментарили? Если я ничего не путаю, она для борьбы как раз с этим багом и нужна была...

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

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

Roy

Дата 11.7.2007, 11:29 (ссылка)

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

Загрузка ...

Новичок

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

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

Код


//    opacity = (opacity == 100)?99.999:opacity;

строка закомментирована, поскольку результата не дает никакого. Если ее раскомментировать - баг все так же проявляется.

smartov

Дата 11.7.2007, 13:59 (ссылка)

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

Загрузка ...

свой собственный

Профиль
Группа: Экс. модератор
Сообщений: 4225
Регистрация: 2.2.2006
Где: NJ

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

Roy, думаю проблема в том, что ты неверно прописал opacity для мозиллы в изначальный настройках слоя.

Вот код, работает во всех современных браузерах (современных == версии не ниже этого года).
Дальше думай сам, ищи ошибку у себя.

Код


<html>
<body>

<style>
#div1 {
    position: absolute;
    top: 0; left : 0;
    width:200px;
    height:200px;
    background: red;
}
#div2 {
    position: absolute;
    top: 0; left : 0;
    width:200px;
    height:200px;
    background: lime;
    opacity: 0;
    filter: alpha(opacity:0);
}
</style>

<div id="div1">Hello1</div>
<div id="div2">Hello2</div>


<script type="text/javascript">

var fromOpacity = 100;
var toOpacity = 0;
var $interval;

function next(from, to) {
    setOpacity(from, fromOpacity);
    setOpacity(to, toOpacity);
    fromOpacity -= 4;
    toOpacity += 4;
    fromOpacity = (fromOpacity < 0 ? 0 : fromOpacity);
    toOpacity = (toOpacity > 100 ? 100 : toOpacity);
}

function setOpacity(obj, opacity) {
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}

window.onload = function() {
    $interval = setInterval(function() {
        if (fromOpacity == 0) {
        clearInterval($interval);
        return;
    }
    next(document.getElementById('div1'), document.getElementById('div2'));
    }, 100)
}

</script>

</body>
</html>

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