Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > изменение прозрачности

Автор: rubanok 21.12.2006, 17:34

При наведении курсора прозрачность меняется, курсор убираем порзрачность изменяется только на 0.1,
а надо чтобы становилось полность непрозрачным. Неправильно отрабатывает функция opacitNo(id)
Не пойму где ошибка
Как правильно прописать строчку (var opaImg = objImg.style.MozOpacity;) для Opera?

Код


var i = 1;

function opacitYes(id){
    var objImg = document.getElementById('progrey' + id);
    var opaImg = objImg.style.MozOpacity;
    objImg.style.MozOpacity = (opaImg - 0.1);
    i++;
    if(i <= 9) setTimeout('opacitYes(' + id + ')', 50);
    else i = 1;
}

function opacitNo(id){
    var objImg = document.getElementById('progrey' + id);
    var opaImg = objImg.style.MozOpacity;
    
    objImg.style.MozOpacity = (opaImg + 0.1);   //parseInt
    i++;
    if(i <= 9) setTimeout('opacitNo(' + id + ')', 50);
    else i = 1;
}

Автор: 12345c 21.12.2006, 19:03

opaImg + 0.1 понимается как строка, пишите 0.1+opaImg или 0.1+parseInt(opaImg) .

2) для Оперы 9+ и FF1.0+ - objImg.style.opacity=opac; , поэтому про MozOpacity можно забыть. Но есть ещё IE:

o.filters[0].opacity=opac*100;

Автор: Aliance 21.12.2006, 19:03

Я делал проще - менял просто применяемый к объекту стиль. ( объект.className )

Автор: rubanok 22.12.2006, 13:10

Тоже решил сделать скрипт с помощью изменения классов и все получилось
Еще одна проблемка как определить браузер Opera 8 и 7, если они определяются как Microsoft Internet Explorer

Ниже полный код:

Код


var i = 0;
var a;

function yesTime(id){
    setTimeout('opacitYes(' + id + ')', 200);
}

function opacitYes(id){
    if(a == 1) return;
  var objImg = document.getElementById('progrey' + id);
  objImg.className = ('opac' + i);
    i++;
  if(i <= 11) setTimeout('opacitYes(' + id + ')', 25);
  else i = 11;
}

function opacitNo(id){
    if(a == 0) return;
  var objImg = document.getElementById('progrey' + id);
  objImg.className = ('opac' + i);
  i--;
  if(i >= 1) setTimeout('opacitNo(' + id + ')', 25);
}

Код


.opac1{
    filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
}
.opac2{
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    opacity:0.9;
}
.opac3{
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    opacity:0.8;
}
.opac4{
    filter:alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
}
.opac5{
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    opacity:0.6;
}
.opac6{
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}
.opac7{
    filter:alpha(opacity=40);
    -moz-opacity:0.4;
    opacity:0.4;
}
.opac8{
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    opacity:0.3;
}
.opac9{
    filter:alpha(opacity=20);
    -moz-opacity:0.2;
    opacity:0.2;
}
.opac10{
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}
.opac11{
    filter:alpha(opacity=0);
    -moz-opacity:0.0;
    opacity:0.0;
}

Код


<div style="width:136px;height:89px;background:url(img/temp/procolor1.gif);">
<a href=""><img src="img/temp/progrey1.gif" id="progrey1" class="opac1" onMouseOver="a=0; yesTime(1);" onMouseOut="a=1; opacitNo(1);"></a>
</div>

Автор: Aliance 22.12.2006, 16:34

Цитата(rubanok @ 22.12.2006, 14:10

)

Еще одна проблемка как определить браузер Opera 8 и 7, если они определяются как Microsoft Internet Explorer

Код


window.opera

Автор: 12345c 22.12.2006, 17:59

Разве это проще - указывать все n классов для прозрачности? Если делать, то динамические стили, которые не будут работать в Опере. Значит, отпадает. Ещё нединамические стили нельзя применить при генерации объекта (не иметь определения стиля, если не надо). Т.е. придётся подгружать стили, даже если ни разу не используется эффект на них.

Автор: rubanok 22.12.2006, 19:38

Спасибо!
Попробую переделать

Автор: 12345c 22.12.2006, 20:46

rubanok, я о том, что классы в задачах эффектов перехода вообще невыгодно использовать, по крайней мере, до поры, пока не отомрут Opera7-8-9 и неизвестно какие ещё. Или пока разработчик скрипта не согласится для Оперы сделать "упрощёнку" эффекта.

Сопутствующие ссылки:

http://www.opera.com/docs/specs/opera9/ ,
http://www.opera.com/docs/specs/opera9/css/ - поддержка того-сего Оперой-9.

Динамические стили - http://forum.vingrad.ru/topic-106281.html .

Автор: SelenIT 22.12.2006, 21:51

Имхо, полезное добавление про динамические стили: http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2